css CSS |网格行属性

CSS |网格行属性

原文:https://www.geeksforgeeks.org/css-grid-row-property/

CSS 中的网格行属性用于指定网格布局中的大小和位置。它是网格行开始和网格行结束属性的组合。

语法:

grid-row: grid-row-start|grid-row-end;

属性值:

grid-row-start: It is used to specify the row on which to start displaying the item.

示例:

```html <!DOCTYPE html>
                     .main {                 display: grid;                 grid-template-columns: auto auto auto auto;                 grid-gap: 10px;                 background-color: green;                 padding: 10px;             }

.GFG {                 background-color: rgba(255, 255, 255, 0.8);                 text-align: center;                 padding: 20px 0;                 font-size: 30px;             }

.Geeks1 {                 grid-row-start: 3;             }
grid-row-start Property


1

2

3

4

5

6

7

8

                          ```
输出:
grid-row-end It is used to specify the row-line on which to stop displaying the item or specify how many rows an item will span. Example:

```html <!DOCTYPE html>
                     .main {                 display: grid;                 grid-template-columns: auto auto auto auto;                 grid-gap: 10px;                 background-color: green;                 padding: 10px;             }

.GFG {                 background-color: rgba(255, 255, 255, 0.8);                 text-align: center;                 padding: 20px 0;                 font-size: 30px;             }

.Geeks1 {                 grid-row-end: span 3;             }
grid-row-end Property


1

2

3

4

5

6

7

8

                          ```
输出: