Raster layouts help you build complex web designs more easily. It transforms HTML elements into containers for grids (rows and columns). You can add any child elements you want to the grid.

Grid initializes elements to rasterize

To convert an HTML element to a grid container, simply set display: grid to it. Display: Grid tells us that CSS Grid properties are ready to be used.

<dl class="container">
  <dd class="item1">item1</dd>
  <dd class="item2">item2</dd>
  <dd class="item3">item3</dd>
  <dd class="item4">item4</dd>
  <dd class="item5">item5</dd>
  <dd class="item6">item6</dd>
</dl>
Copy the code
.container{
  display: grid;
}
Copy the code

⚠ In a CSS raster layout, the parent element is the raster container (in this case, the DL element of class=”container”), and the children below it are what we call items

Grid-template-columns Sets the number of columns

We have set the container to be taged, so we need to set the template column number for the circled element, indicating the area of the column.

.container{
  min-width: 200px;
  display: grid;
  grid-template-columns: 100px 100px auto;
}
Copy the code

The grid-template-columns attribute value 100px 100px auto means that the area is divided into three columns. The first and second columns are 100px wide and the third column is adaptive.

Grid-template-rows sets the number of rows

So we set the number of columns, so we have the number of rows, so let’s set the number of template rows.

.container{
  min-height: 200px;
  display: grid;
  grid-template-rows: 60px auto;
}
Copy the code

The grid-template-rows attribute of 60px auto means that the area is divided into two rows, with the height of the first row fixed at 60px and the height of the second row adaptive.

Unit Settings can be px, auto, %, fr. Here fr is the abbreviation for fraction, which means the part of something. Take the following example:

Grid-template-rows: auto 10% 2fr 1fr, which means that the rasterized area is divided into 4 rows: the first row is adaptive based on the content, the second behavior area is 10%, and the last remaining area is divided into 3 parts, 2FR means 2/3 of the area, 1FR means 1/3 of the area.

Grid-column-grap Sets column spacing

It is necessary to set the spacing between columns, which you can think of as margin-left and margin-right applications:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-column-gap: 10px;
}
Copy the code

Grid-column-gap indicates that columns are separated by 10px. The left interval of the left boundary area is not affected, and the right interval of the right boundary area is not affected.

Grid-row-gap sets the row spacing

As with the column margins above, it is necessary to set the column spacing, corresponding to the margin-top and margin-bottom applications:

.container{
  display: grid;
  grid-template-rows: 60px auto;
  grid-row-gap: 10px;
}
Copy the code

Grid-row-gap indicates that rows are separated by 10px, which has no effect on the top interval of the upper boundary area and the bottom interval of the lower boundary area.

The grid – gap shorthand

Like margin, we can abbreviate margin-top, margin-right, margin-bottom, margin-left. Grid-gap is a shorthand for grid-row-gap and grid-column-gap.

Margin; margin; grid-gap; margin; margin; margin

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 60px auto;
  grid-gap: 10px 20px;
}
Copy the code

Grid-gap: 10px 20px indicates that row spacing is 10px and column spacing is 20px.

So far, we’ve been talking about splitting the raster layout container. Now let’s look at the layout of its children.

Child element grid – the column

Grid-column denotes the column span, for example:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  .item5{
    grid-column: 1 / 3
  }
}
Copy the code

Grid-column The column span above grid-column, indicating that the element named Item5 spans the first to third columns.

Child element grid – row

Grid-row represents the row span, for example:

.container{
  display: grid;
  grid-template-rows: 50px 50px auto; .item3{ grid-row: 2 / 4}}Copy the code

The row span above grid-row, indicating that the element named Item3 spans the second to fourth lines.

Child elements the justify – self

Context-self changes the width and placement of elements, with values like:

  • Stretch: default value. The width of the stretch content is the preset width

  • Start: Width is the width of the content displayed on the left

  • Center: The width is the width of the content, and the content is displayed in the center

  • End: The width is the width of the content, which is displayed on the right

Child elements align – self

Align-self Changes the height and position of the elements, with values as follows:

  • “Stretch” : default value. The stretch height is the preset height

  • Start: The width is the height of the content, and the content is displayed on the top

  • Center: The width is the height of the content, and the content is displayed in the center

  • End: The width is the height of the content and the content is displayed on the lower side

justify-items

If we want to arrange all child elements horizontally, we need to use the context-items property in the container, rather than the context-self property in a child element. The value of the context-items property is the same as context-self.

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
}
Copy the code

align-items

Similarly, if we want to arrange all the child elements vertically, we need to use the align-items property in the set container instead of setting the align-self property for a child element. The align-items property has the same value as align-self.

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
}
Copy the code

grid-template-areas

Name each grid cell through grid-template-areas.

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
}
Copy the code

Note: ⚠. Represents an empty cell in the table

The child element grid-area association default name

Grid-template-areas already have cells and names for elements, which can then be associated with their children through grid-Area.

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto; grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
  .item6{ grid-area: footer; }}Copy the code

Of course, we can just use grid-area to achieve the above effects that require grid-template-area and grid-area. The following

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  .item6{
    grid-area: 3 / 1 / 4 / 4; }}Copy the code

Grid-area syntax grid-area syntax

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
Copy the code

Simplify using the function repeat

Use grid-template-columns and grid-template-rows to define the column structure of the grid. We defined it one by one. We can also simplify operations by using the repeat() function.

For example, the first and second columns are 100px, the third column is 1fr, and the last column is 2fr.

.container{
  display: grid;
  grid-template-columns: repeat(2.100px) 1fr 2fr;
}
Copy the code

The function minmax specifies the minimum maximum value

In the case of our limited layout space, we need to set the minimum and maximum values for the elements of the layout, which can be easily done with the minmax() function.

.container{
  display: grid;
  grid-template-columns: repeat(2.100px) minmax(60px.1fr) 2fr;
}
Copy the code

The above properties are sufficient for real-world development. If you want to learn more about other attributes, you can click on the reference links below. Grid compatibility is leveraged, with the exception of Opera Mini and Baidu Browser

For more information, go to JIMMY BLOG

reference

cssgridgarden.com/

www.freecodecamp.org/learn/respo…