Home > Article > Web Front-end > How to set the size and position of the specified grid in css
How to set the size and position of the specified grid in css
- 醉折花枝作酒筹Original
- 2021-08-13 17:35:063356browse
In the previous article, we learned about how to define the size of grid lines. Please see "How to define the size of grid lines in css". This time we will learn how to set the size and position of the specified grid. You can refer to it if necessary.
Before we looked at how to define the size of grid lines, this time we will do something different. Let's take a look at a little chestnut.
<style>
article {
display: grid;
width: 300px;
height: 300px;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
div{
background: rgb(208, 159, 255);
background-clip: content-box;
border: solid 1px rgb(208, 159, 255);
padding: 10px;
}
div:first-child{
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</article>
</body>The result of this small example is
This example is very similar to the example in the previous article, both are 300* There are always several boxes in the 300 box. The difference may be that there are only 8 boxes this time, while there were 9 boxes last time. Is there anything different? Let's take a look at the small box No. 1. Does it occupy an extra small grid? No wonder there is no small box No. 9.
Then let’s take a look at what attributes cause it.
grid-row attribute is a shorthand for grid-row-start (en-US) and grid-row-end (en-US) ) form, which defines the size and position of the grid unit relative to the grid row (row), which can be passed by the baseline (line), span (span), or doing nothing (automatic) in the grid layout, thus Specify the row start and row end of the grid area.
If two
It is the shorthand property for the following property:
grid-row-start
grid-row-end
Let’s take a look at the syntax format of this attribute.
grid-row: grid-row-start / grid-row-end;
The grid-row-start represents the row from which the item starts to be displayed; the grid-row-end represents the row at which the item stops being displayed, or how many rows it spans.
It should be noted that:
IE11 does not support automatic placement of grid cells. Unless -ms-grid-column and -ms-grid-row are explicitly annotated, all cells will end up in the first row/column of the grid.
Recommended learning: css video tutorial
The above is the detailed content of How to set the size and position of the specified grid in css. For more information, please follow other related articles on the PHP Chinese website!