Master the Grid layout (long warning)

If the other shore bustling fall, who accompany me to see the sunset fleeting years

Writing in the front

Your mastery of CSS layout determines how fast you can develop pages in Web development. As Web technology continues to evolve, the number of ways to implement various layouts is endless.

Recently, I put together a series of articles in about half a month using shred time. This series summarizes the various layouts in CSS, their implementation methods and common techniques. This article series will give you a new understanding of CSS layout.

The navigation posts of this series can be entered by me, which can quickly jump to the articles you want to know (recommended favorites)

The Grid layout is the newest and most powerful CSS layout.

Summary of the article

Due to the length of this article (please read with care), the following figure covers the main points of this article

The text start

The basic concept

Grid: A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid where we can place grid elements in relation to those rows and columns.

Grid container: A grid container is the parent element of all grid items, and its display value is grid.

Grid item: a child element of the grid container (a child element that does not contain a child element).

Grid lines: The dividing lines that make up Grid items. Grid creates numbered Grid lines for us to locate each Grid element. For example, the following grid has four vertical grid lines in three columns and two rows.

Grid track: A grid track is the space between any two lines in the grid. In the image below you can see a highlighted track – the first row track of the grid.

Grid cell: A grid cell consists of two adjacent column grid lines and two adjacent row grid lines. In the figure below, I will highlight the first grid cell.

Grid area: The total space surrounded by four grid lines. The highlighted grid area in the figure below extends by 2 columns and 2 rows.

Fr (unit): allocation of the remaining space. Used to allocate the remaining space in a series of length values, and if multiple parts have been specified, the remaining space is allocated proportionally according to their respective numbers.

Container attribute

The display properties

The display attribute is used to specify that a container uses a grid container. The syntax is as follows:

.container {
  display: grid | inline-grid;
  /* * grid: generate block level grid * inline-grid: generate inline grid */
}
Copy the code

It is worth noting that when set to a grid container, float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for grid items are invalid.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The display properties</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

init.css

body { margin: 0; padding: 20px; }
.item { height: 300px; width: 300px; line-height: 300px; text-align: center; font-size: 140px; }
.item1 { background-color: #e6005c; }
.item2 { background-color: #777bce; }
.item3 { background-color: #c9780c; }
.item4 { background-color: #fffae8; }
.item5 { background-color: #ce3b3b; }
.item6 { background-color: #e666ff; }
.item7 { background-color: #f4ea20; }
.item8 { background-color: #b4a4ca; }
Copy the code

The execution result is as follows:

grid-template

1. `grid-template-columns`Properties and`grid-template-rows`attribute

The grid-template-columns and grid-template-rows properties are used to specify the width and height of the grid columns, separated by Spaces. The syntax structure is as follows:

.container {
	grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... ; }Copy the code

Attribute values

Track size (track-size): You can use any CSS length, percentage, or fraction, orfrThe unit.
Grid line name (line-name): You can choose any name

The example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The grid - template attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 300px auto 300px 20%;
                grid-template-rows: 1fr 1fr;
            }
            .item2..item3..item6..item7 {
                width: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>
Copy the code

The execution result is as follows:

2. The name of the grid line

In the grid-template-columns and grid-template-rows properties, you can also use square brackets [] to specify the name of each grid line for future reference.

The example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The name of the grid line</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 700px;
                margin: 0 auto;
                grid-template-columns: [c1] 320px [c2] 3fr [c3] 2fr [c4] 20% [c5];
                grid-template-rows: [r1] 1fr [r2] 1fr [r3];
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The renderings are as follows:

3. `repeat()`function

Sometimes, we need to write the same value, especially in the grid, it is particularly troublesome, this time repeat() function to help us solve this problem.

This function applies to grid-template-columns and grid-template-rows in the CSS Grid property. The grammar rules are as follows:

.container {
  grid-template-columns: repeat(repeat, value);
}
Copy the code

Attribute values:

Repeat: indicates the number of times to repeat

Optional value:
- number: integer to determine the exact number of repetitions
- auto-fill: Is automatically filled based on grid items
- auto-fit: Automatically fills based on the grid container
Value: indicates duplicate values

Optional value:
- length: non-negative length
- percentage: a non-negative percentage of the inline size of the grid container in the column track, and the block length and width of the grid container in the row track.
- flex: the unit is the non-negative dimension of FR, specifying the coefficient value of the elastic layout of the track.

The sample code looks like this:

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  / * is * /
  grid-template-columns: repeat(6.1fr);
}
Copy the code

`4. minmax()`function

The minmax() function defines a wide and long range of closed columns. This function applies to grid-template-columns and grid-template-rows in the CSS Grid property as follows:

.container {
  grid-template-columns: minmax(minValue, maxValue);
}
Copy the code

Optional value:

length: non-negative length
percentage: a non-negative percentage of the inline size of the grid container in the column track, and the block length and width of the grid container in the row track.
flex: the unit is the non-negative dimension of FR, specifying the coefficient value of the elastic layout of the track.

The sample code looks like this:

.container {
  grid-template-columns: minmax(100px.400px);
}
Copy the code

Minimum 100px maximum 400px

`5. grid-template-areas`attribute

The grid template is defined by referring to the name of the grid area specified by the grid-Area property. The grammatical structure is as follows:

.contaienr {
  grid-template-areas: none |
    'grid-area-name | . grid-area-name | . grid-area-name | . ... '
    'grid-area-name | . grid-area-name | . grid-area-name | . ... '
}
Copy the code

Attribute values

grid-area-nameUse:grid-areaProperty to set the grid area name
.: The dot indicates an empty grid cell
none: No grid area is defined.

The sample code is as follows

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The grid - the template - areas attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                Set the container element to the grid container */
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                /* Divide the area into three rows and two columns */
                grid-template-areas:
                    'header header'
                    'nav main'
                    'footer footer';
                /* 3. Set width and height */ for each area
                grid-template-columns: 300px 1fr;
                grid-template-rows: 200px auto 200px;
            }
            .item {
                width: auto;
                height: 200px;
                line-height: 200px;
            }
            .header {
                /* 4. Select */ from grid-template-Areas where the element is located
                grid-area: header;
            }
            .nav {
                /* 4. Select */ from grid-template-Areas where the element is located
                grid-area: nav;
            }
            .main {
                /* 4. Select */ from grid-template-Areas where the element is located
                grid-area: main;
            }
            .footer {
                /* 4. Select */ from grid-template-Areas where the element is located
                grid-area: footer;
            }
            .nav..main {
                height: auto;
                line-height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item header">header</div>
            <div class="item2 item nav">nav</div>
            <div class="item3 item main">main</div>
            <div class="item4 item footer">footer</div>
        </div>
    </body>
</html>
Copy the code

The execution result is as follows:

It is important to note that the naming of the region affects the grid lines. The start grid line of each area is automatically named as the area name-start, and the end grid line is automatically named as the area name-end.

For example, if the area is named header, the horizontal and vertical grid lines at the start position are called header-start, and the horizontal and vertical grid lines at the end position are called header-end.

The grid – template attribute

This property is shorthand for the grid-template-rows, grid-template-columns, and Grid-template-Areas properties. The syntax structure is as follows:

.container {
  grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ] + [ / <explicit-track-list> ]? ; }Copy the code

Attribute values

noneSet all three properties to their initial values, i.e., one row, one column, one region (see).
grid-template-rows / grid-template-columns:grid-template-rows 和 grid-template-columnsSet to the specified value, at the same time, setgrid-template-areas 为 none
[ <line-names>? <string> <track-size>? <line-names>? ] + [ / <explicit-track-list> ]?Set:grid-template-areasFor the column to<string> 、 grid-template-columns 为 <explicit-track-list>(the default isnone),grid-template-rows 为 <track-size>(the default isauto) and splice the lines defined before and after the size.

The sample code looks like this:

grid-template-areas:
            'header header'
            'nav main'
            'footer footer';
grid-template-columns: 300px 1fr;
grid-template-rows: 200px auto 200px;

/* abbreviated as */

grid-template:
              [row1-start] 'header header' 200px [row1-end]
              [row2-start] 'nav main' auto [row2-end]
              [row3-start] 'footer footer' 200px [row3-end]
              / 300px 1fr;
Copy the code

The end result of the above code is the same.

However, given the readability of the code, it is not recommended to use the shorthand

Gap properties

The GAP attribute is short for the Row-gap and column-gap attributes.

This property is used to specify the size of the grid line, imagine setting the width of the spacing between columns/rows. The grammatical structure is as follows:

.contianer {
  column-gap: <line-size>;
  row-gap: <line-size>;
  /* If the second value is omitted, the browser considers the second value equal to the first value. * /
  gap: <line-size> <line-size>;
}
Copy the code

Attribute values

<line-size>: Length value, for example20px.

The sample code is as follows (based on the code above) :

.container {
  /* Write 1 */
  column-gap: 10px;
  row-gap: 10px;
  /* Write 2 */
  gap: 10px 10px;
  /* 3 */
  gap: 10px;
}
Copy the code

The execution result is as follows:

Note that the gap, column-gap, and row-gap properties are preceded by the prefix grid-, i.e. Grid-gap, grid-column-gap, and grid-row-gap. During use, we can write these two attributes together to ensure validity.

The items property

1. `align-items`attribute

Align the contents of the grid along the column axis. The grammatical structure is as follows:

.container {
  align-items: start | end | center | stretch;
}
Copy the code

Attribute values:

start: Content is aligned with the top of the grid area
end: Content is aligned with the bottom of the grid area
center: The content is located in the vertical center of the grid area
stretch: The content height occupies the entire grid area space (default)

2. `justify-items`attribute

Align the contents of the grid along the row axis. The grammatical structure is as follows:

.container {
  justify-items: start | end | center | stretch;
}
Copy the code

Attribute values:

start: Content is aligned with the left end of the grid area
end: Content is aligned to the right of the grid area
center: The content is located in the horizontal center of the grid area
stretch: The content width occupies the entire grid area space (default)

3. `place-items`attribute

Place-items is a shorthand property that allows you to set column axis alignment and row axis alignment at the same time. The syntax structure is as follows:

.container {
  place-items: align-items justify-items;
}
Copy the code

If you write only one value, the second value is the same as the first by default.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The grid - template attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                /* align-items property, which controls the vertical alignment of grid items */
                align-items: end;
                /* justify-items property, which controls horizontal alignment of grid items */
                justify-items: center;
                /* place-items, which is a short form of the align-items and justify-items properties. If you write only one value, the second value is the same as the first */
                place-items: end center;
            }
            .item {
                height: 200px;
                width: 200px;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The execution result is as follows:

The content attribute

1. `align-content` attribute

Sets the alignment of the grids in the grid container to the grid along the column axis. The grammatical structure is as follows:

.container {
  align-content : start | end | center | stretch | space-around | space-between | space-evenly;
}
Copy the code

Attribute values:

start: The grid is aligned with the top of the grid container
end: The grid is aligned with the bottom of the grid container
center: Aligns the grid with the vertical center of the grid container
stretch: Resize the mesh items to fill the mesh container with height
space-around: Set equal height blank gap between grid items, and the size of the outer edge gap is a partner of the width of the middle blank gap
space-between: Set equal height blank gap between grid items, and there is no gap on the outer edge
space-evenly: Set equal height gaps between each grid item, including the outer edge

2. `justify-content` attribute

Sets the alignment of the grids in the grid container along the row axis. The grammatical structure is as follows:

.container {
  align-content : start | end | center | stretch | space-around | space-between | space-evenly;
}
Copy the code

Attribute values:

start: The grid is aligned to the left of the grid container
end: The grid is aligned to the right of the grid container
center: Align the grid with the horizontal center of the grid container
stretch: Resize the mesh items to fill the mesh container with height
space-around: Set equal width blank gap between grid items, and the size of the outer edge gap is a partner of the width of the middle blank gap
space-between: Set equal width blank gap between grid items, and there is no gap on the outer edge
space-evenly: Set equal width gaps between each grid item, including the outer edge

3. `place-content`attribute

The place-content attribute is shorthand for both align-content and justify-content. The syntax is as follows:

.container {
  place-content: align-content justify-content;
}
Copy the code

If you write only one value, the second value is the same as the first by default.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The content attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 300px 300px 300px 300px;
                grid-template-rows: 300px 300px;
                place-items: center;
                /* align-content, which controls the vertical alignment of the grid containers */
                align-content: space-around;
                /* interview-content, which controls the horizontal alignment of the grid container */
                justify-content: space-around;
                /* the place-content attribute is a short form of the align-content and justify-content attributes. If you use only one value, the second value is the same as the first */
                place-content: space-around;
            }
            .item {
                height: 200px;
                width: 200px;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The execution result is as shown in the figure below:

The grid – auto attribute

1. `grid-auto-columns`Properties and`grid-auto-rows`attribute

This set of properties specifies the size of the automatically generated network track (implicit network track)

An implicit network track is created when the displayed position is outside the range of a row or column specified in the grid.

They are written in the same way as grid-template-columns and grid-template-rows. If you do not specify this property, the browser determines the column width and row height of the new grid solely based on the size of the cell contents.

2. `grid-auto-flow`attribute

This property controls how the automatic layout algorithm works. The grammatical structure is as follows

.container {
  grid-auto-flow: [ row | column ] || dense
}
Copy the code

Attribute values:

row: Tells the automatic layout algorithm to fill each row in turn, adding new rows as needed
column: Tells the automatic layout algorithm to fill each column in turn, adding new columns as needed
dense: Tells the automatic layout algorithm to try to fill holes in the grid if smaller grid items follow

The grid properties

Grid is a CSS shorthand property that can be used to set the following properties:

Explicit grid properties grid-template-rows, grid-template-columns and grid-template-areas Implicit grid properties grid-auto-rows, Grid-auto-columns and grid-auto-flow, spacing properties grid-column-Gap and grid-Row-gap.

The grammatical structure is as follows:

.contaienr {
  grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ]  <'grid-auto-columns'>? | [ auto-flow && dense? ]  <'grid-auto-rows'>? / <'grid-template-columns'>;
}
Copy the code

This syntax is not easy to read and is recommended for practical development.

Properties on the grid item

start / end

1. `grid-column-start`Attributes,`grid-column-end`Attributes,`grid-row-start`Attributes,`grid-row-end`attribute

The position of a grid item can be determined by the four properties of grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

The grammatical structure is as follows:

.item {
  /* The vertical grid line where the left border is */
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  /* The vertical grid line where the right border is */
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  /* The vertical grid line where the top border is */
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  /* The vertical grid line where the bottom border is */
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
Copy the code

Attribute values

<number>: Use numbers to refer to the corresponding numbered grid lines.
<name>: Uses the grid line name to refer to the appropriately named grid line.
span <number>: The grid item will span a specified number of grid tracks
span <name>The: grid item will cross a number of tracks until it hits a named grid line
auto: Auto layout, either auto span, or span a default track

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>start / end</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 820px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item {
                line-height: 200px;
                height: 200px;
            }
            .item1 {
                /* 1
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 3;

                /* 2
                grid-column-start: c1;
                grid-column-end: c3;
                grid-row-start: r1;
                grid-row-end: r3;

                /* 3. + span */
                grid-column-start: 1;
                grid-column-end: span 2;
                grid-row-start: 1;
                grid-row-end: span 2;

                /* 4. + span */
                grid-column-start: 1;
                grid-column-end: span c3;
                grid-row-start: 1;
                grid-row-end: span r3;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The execution result is as follows:

Note that if end is not declared, it will default to a track across domains

The example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Don't declare the end</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 620px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item { line-height: 200px; height: 200px; }
            .item1 {
                grid-column-start: 2;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The renderings are as follows:

If grid items overlap each other, you can use z-index to control the order in which they are stacked

The example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The stack</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 620px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item { line-height: 200px; height: 200px; }
            .item1..item2 { width: auto; height: auto; }
            .item1 {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 3;
                /* Control the stack order by z-index */
                z-index: 2;
            }
            .item2 {
                grid-column-start: 2;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 3;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

Copy the code

The renderings are as follows:

2. `grid-column`Properties and`grid-row`attribute

The grid-column property is shorthand for the grid-column-start and grid-column-end properties.

The grid-Row property is short for grid-row-start and grid-row-end.

The syntax structure is as follows:

.item {
  grid-column: grid-column-start / grid-column-end;
  grid-row: grid-row-start / grid-row-end;
}
Copy the code

The sample code looks like this:

.item1 {
  /* 1
  grid-column: 1 / 3;
  grid-row: 1 / 3;

  /* 2
  grid-column: c1 / c3;
  grid-row: r1 / r3;

  /* 3. + span */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;

  /* 4. + span */
  grid-column: 1 / span c3;
  grid-row: 1 / span r3;
}
Copy the code

The grid – area property

The grid-area attribute is used to specify the area of a grid item. This attribute can be shorthand for grid-column-start, grid-row-start, grid-column-end, and grid-row-end. The syntax structure is as follows:

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> 
}
Copy the code

Attribute values:

name: grid-template-areasIs defined in.
<row-start> / <column-start> / <row-end> / <column-end>: the value of<number> | <name> | span <number> | span <name> | autoOne of them.

The sample code looks like this:

.item1 {
  /* Columns-start: 1; /* columns-start: 1; /* columns-start: 1
  grid-area: 1 / 1 / 3 / 3;
}
Copy the code

The renderings are as follows:

self

1. `align-self`attribute

Align the contents of the grid items along the column axis. The syntax format is as follows:

.container {
  align-self: start | end | center | stretch;
}
Copy the code

2. `justify-self`attribute

Align the contents of grid items along the line axis. The syntax format is as follows:

.container {
  justify-self: start | end | center | stretch;
}
Copy the code

2. `place-self`attribute

Place-self is a shorthand property that allows you to set column alignment and row alignment at the same time. The syntax is as follows:

.container {
  place-self: start | end | center | stretch;
}
Copy the code

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The self attribute</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 800px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: repeat(2.400px);
                grid-template-rows: repeat(2.400px);
            }
            .item {
                /* All items are centered */
                place-self: center;
            }
            .item1 {
                /* item1 */
                justify-self: end;
                align-self: start;
            }
            .item2 {
                /* item2 */
                justify-self: start;
                align-self: end;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>
Copy the code

The execution result is as follows:

(after)

PS: There is a little game about Grid layout that can help us practice Grid Garden – a game to learn CSS Grid

Master the Grid layout (long warning)

Master the Grid layout (long warning)

Writing in the front

Summary of the article

The basic concept

Container attribute

The display properties

grid-template

1. grid-template-columnsProperties andgrid-template-rowsattribute

2. The name of the grid line

3. repeat()function

4. minmax()function

5. grid-template-areasattribute

The grid – template attribute

Gap properties

The items property

1. align-itemsattribute

2. justify-itemsattribute

3. place-itemsattribute

The content attribute

1. align-content attribute

2. justify-content attribute

3. place-contentattribute

The grid – auto attribute

1. grid-auto-columnsProperties andgrid-auto-rowsattribute

2. grid-auto-flowattribute

The grid properties

Properties on the grid item

start / end

1. grid-column-startAttributes,grid-column-endAttributes,grid-row-startAttributes,grid-row-endattribute

2. grid-columnProperties andgrid-rowattribute

The grid – area property

self

1. align-selfattribute

2. justify-selfattribute

2. place-selfattribute

Related Posts

Configure webPack 4+ React scaffolding from scratch

With Mockjs, the front end can also run very smoothly

Write a proper flow of scaffolding

1. `grid-template-columns`Properties and`grid-template-rows`attribute

3. `repeat()`function

`4. minmax()`function

`5. grid-template-areas`attribute

1. `align-items`attribute

2. `justify-items`attribute

3. `place-items`attribute

1. `align-content` attribute

2. `justify-content` attribute

3. `place-content`attribute

1. `grid-auto-columns`Properties and`grid-auto-rows`attribute

2. `grid-auto-flow`attribute

1. `grid-column-start`Attributes,`grid-column-end`Attributes,`grid-row-start`Attributes,`grid-row-end`attribute

2. `grid-column`Properties and`grid-row`attribute

1. `align-self`attribute

2. `justify-self`attribute

2. `place-self`attribute