How to set the size and position of the specified grid in css-Front-end Q&A-php.cn

How to set the size and position of the specified grid in css

醉折花枝作酒筹

Release： 2021-08-13 17:36:16

Original

3434 people have browsed it

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>

Copy after login

The result of this small example is

How to set the size and position of the specified grid in css

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 values are specified, then the value before the slash is specified as grid-row-start, and the value after the slash is specified as grid-row-end value.

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;

Copy after login

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!