Concepts seem useless after learning concepts. Today we’ll use the Grid for two simple layouts.

Statement of the container

display: grid; Or display: inline – grid; Or display: subgrid; . Grid and inline-grid are best understood as block-level grids and inline block-level grids. A subgrid is used to define a subgrid that inherits a set of specifications from the parent grid.

Divided into container

Define horizontal and vertical grid tracks. Here we try to define a 4 by 4 grid. Code, click preview

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>Copy the code
.grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px 60px 60px 60px; grid-gap: 5px; } .grid > div { background: grey; /* display: flex; color: #fff; font-size: 150%; justify-content: center; align-items: center; }Copy the code

grid-template-columns

Grid-template-columns are used to define the width of the grid column (i.e. the rail width). The code indicates that the container is divided into 4 columns. The width of each column is 60px and can be changed at will.

grid-template-rows

Grid-template-rows is used to define the height of the grid rows. The code says to divide the container into four rows. Through the above two lines of code to achieve a 4 * 4 grid. If you don’t believe me, add a few divs and try it out.

Grid-gap is used to control the spacing of the grid, precisely is used to control the spacing of the grid area.

Control project

So far, our CSS seems to be working on containers, so how do we do something more advanced? Code, click preview

<div class="grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>Copy the code
.grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px 60px 60px 60px; grid-gap: 5px; } .grid > div { background: grey; /* display: flex; color: #fff; font-size: 150%; justify-content: center; align-items: center; } .item1 { grid-column-start: 4; grid-row-start: 2; } .item2 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .item3 { grid-column: -1 / -2; grid-row: 1 / 2; } .item4 { grid-column: 1 / span 2; grid-row: -1 / -3; } .item5 { grid-area: -1 / 3 / -3 / 4; } .item6 { grid-area: -1 / 5 / -3 / 4; }Copy the code

As we discussed in the Concept section, grid lines are numbered 1, 2, 3, 4… . Controlling the position of the grid area depends on these grid lines. Here are 5 examples of how to control grid lines to achieve region positioning and cell merging.

grid-column-start & grid-row-start

Grid-column-start grid-row-start controls where columns and rows start in the range. Note that we do not give grid-column-end and grid-row-end values. Their default values can simply be understood as the start value plus one. There’s actually a notion of a span.

.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}Copy the code

grid-column-end& grid-row-end

Grid-column-end grid-row-end is used to control where an area ends. Here is a knowledge point to remember, ✍️end value can be smaller than the value of start, do not believe you try. And the grid – column – start, the grid – column – the end, the grid – row – start, the grid – row – end value can be negative, negative number means the number from the back forward ✍ ️.

.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}Copy the code

grid-column & grid-row

There are so many related properties of the grid that there are bound to be abbreviations. Grid-column is short for grid-column-start and grid-column-end. The grid – row in the same way.

.item3 { grid-column: -1 / -2; grid-row: 1 / 2; } // equivalent to.item3 {grid-column-start: -1; grid-column-end: -2; grid-row-start: 1; grid-row-end: 2; }Copy the code

span

Span means to span several cells. The function is when you don’t want to count all the time, you can use span. Here are four ways to write a region definition.

.item4 { /* 1 */ grid-column: 1 / span 2; /* 2 */ grid-column: span 2 / 3; /* 3 */ grid-column-start: 1; grid-column-end: span 2; /* 4 */ grid-column-start: span 2; grid-column-end: 3; / / grid-row: -1 / -3; }Copy the code

grid-area

Grid-area is short for grid-row and grid-column. The order is grid-row-start, grid-column-start, grid-row-end, grid-column-end.

.item5 { grid-area: -1 / 3 / -3 / 4; } // equivalent to.item {grid-row-start: -1; grid-row-end: -3; grid-column-start: 3; grid-column-end: 4; }Copy the code

Here’s a question to ponder: Can span be used in grid-area? 👈

conclusion

This article hopes that you can master the method of defining containers and orbits and n ways of writing grid region.

We recommend to cSSGridgarden practice, deepen the memory of grid properties. Once you understand the grid concept, it’s time to test your memory skills.

A deeper understanding of the layout artifact Flexbox

Welcome to criticize, or leave a message. QQ group: 538631558