Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how CSS defines a grid, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this CSS article on how to define a grid. Let's take a look at it.

Define a grid

You can define a grid by setting the display property of the parent container to grid or inline-grid. This allows you to use the grid-template-columns and grid-template-rows properties to create a grid.

In this example, a three-column grid is created, where the column width of three columns is 100px, and the spacing between columns is specified as 10px. At the same time, the grid has three rows, the height of each row is automatic, and the spacing between rows is 10px. To put it simply, it is a grid of three rows and three columns, and the spacing between columns and rows is 10px.

At this point, the browser automatically fills the child elements in the container into each grid cell, and when the specified number of columns is exceeded, the grid will automatically wrap.

See how the code is done:

HTML

Copy the code

The code is as follows:

A

B

C

D

E

F

G

H

I

J

CSS

Copy the code

The code is as follows:

Body {

Padding: 50px

}

.wrapper {

Display: grid

Grid-template-columns: 100px 10px 100px 10px 100px

Grid-template-rows: auto 10px auto

}

.box {

Background-color: # 444

Color: # fff

Font-size: 150%

Padding: 20px

}

.b, .d, .g,. I {

Background-color:red

}

Define the key code for the grid:

Copy the code

The code is as follows:

.wrapper {

Display: grid

Grid-template-columns: 100px 10px 100px 10px 100px

Grid-template-rows: auto 10px auto

}

Online case

As you can see from the example effect, the .wrapper container is defined as a grid through display:grid; and uses grid-template-columns:100px 10px 100px 10px 100px; and grid-template-rows:auto 10px auto; specifies column width, column spacing, row height, row spacing, and so on. The corresponding child elements .a, .c, .e, .f, .h, and .j columns are 100px (that is, black areas), while .b, .d, .g, and .i are column-to-column spacing 10px (that is, red areas). And when the child element can not be filled in a line, it will automatically wrap, such as .f ~ .j automatically wrap to the second line display.

Space occupying area based on grid lines

The cells in the grid are divided by grid lines, so in the grid layout, grid lines can also be used to set placeholder areas for child elements. Based on the above example, there are ten child elements .a ~ .j under the container .wrapper, so let's see how to implement various areas in the grid layout based on gridlines.

For grid lines, there are two kinds of grid layout, one is column lines, the other is row lines. The corresponding grid cells have column line start line (grid-column-start), column line end line (grid-column-end) and row line start line (grid-row-start), row line end line (grid-row-end).

As shown in the image above, the purple ones are column gridlines and the blue ones are row gridlines, where the cell column starting line in bright red is line3, the column ending line is line4, the row starting line is line3, and the row ending line is line4. That is to say, the area between the four grid lines is a cell.

Next, take a look at an example of how to use gridlines to implement cell placeholder areas:

HTML

Copy the code

The code is as follows:

A

B

C

D

E

F

G

H

I

J

CSS

Copy the code

The code is as follows:

Body {

Padding: 50px

}

.wrapper {

Display: grid

Grid-template-columns: 100px 10px 100px 10px 100px 10px 100px

Grid-template-rows: auto 10px auto 10px auto

}

.box {

Background-color: # 444

Color: # fff

Font-size: 150%

Padding: 20px

Text-align: center

}

.a {

Grid-column-start: 1

Grid-column-end: 2

Grid-row-start: 1

Grid-row-end: 2

}

.b {

Grid-column-start: 3

Grid-column-end: 4

Grid-row-start: 1

Grid-row-end: 2

}

.c {

Grid-column-start: 5

Grid-column-end: 6

Grid-row-start: 1

Grid-row-end: 2

}

.d {

Grid-column-start: 7

Grid-column-end: 8

Grid-row-start: 1

Grid-row-end: 2

}

.e {

Grid-column-start: 1

Grid-column-end: 2

Grid-row-start: 3

Grid-row-end: 4

}

.f {

Grid-column-start: 3

Grid-column-end: 4

Grid-row-start: 3

Grid-row-end: 4

}

.g {

Grid-column-start: 5

Grid-column-end: 6

Grid-row-start: 3

Grid-row-end: 4

}

.h {

Grid-column-start: 7

Grid-column-end: 8

Grid-row-start: 3

Grid-row-end: 4

}

.i {

Grid-column-start: 1

Grid-column-end: 2

Grid-row-start: 5

Grid-row-end: 6

}

.j {

Grid-column-start: 3

Grid-column-end: 4

Grid-row-start: 5

Grid-row-end: 6

}

Online case

This way you can position your child elements .a ~ .b anywhere. For example, if you want to swap .an and .f now, it can be easily achieved:

Copy the code

The code is as follows:

.a {

Grid-column-start: 3

Grid-column-end: 4

Grid-row-start: 3

Grid-row-end: 4

Background:red

}

.f {

Grid-column-start: 1

Grid-column-end: 2

Grid-row-start: 1

Grid-row-end: 2

Background:orange

}

Abbreviated gridlines

The first two examples show you how to use gridlines to achieve layout, it can be said to be simple and convenient, the only trouble is to write code, what grid-column-start, grid-column-end and so on. In fact, there is an abbreviated way to make you feel no more pain.

The abbreviation of gridlines is actually the merging of the start and end values of grid-column and grid-row, separated by /. For example:

Copy the code

The code is as follows:

.a {

Grid-column-start: 1

Grid-column-end: 2

Grid-row-start: 1

Grid-row-end: 2

}

It can be written as:

Copy the code

The code is as follows:

.a {

Grid-column: 1 / 2

Grid-row: 1 / 2

}

In this way, the code in the previous example can be changed to shorthand:

Copy the code

The code is as follows:

.a {

Grid-column: 1 / 2

Grid-row: 1 / 2

}

.b {

Grid-column: 3 / 4

Grid-row: 1 / 2

}

.c {

Grid-column: 5 / 6

Grid-row: 1 / 2

}

.d {

Grid-column: 7 / 8

Grid-row: 1 / 2

}

.e {

Grid-column: 1 / 2

Grid-row: 3 / 4

}

.f {

Grid-column: 3 / 4

Grid-row: 3 / 4

}

.g {

Grid-column: 5 / 6

Grid-row: 3 / 4

}

.h {

Grid-column: 7 / 8

Grid-row: 3 / 4

}

.i {

Grid-column: 1 / 2

Grid-row: 5 / 6

}

.j {

Grid-column: 3 / 4

Grid-row: 5 / 6

}

There is a key thing in CSS Grid Layout, the grid region grid-area. Grid area it is a space composed of four grid lines. To put it simply, a grid cell is also a grid area (because it is also a space composed of four grid lines), and multiple cells together are also a grid area. In this way, to achieve the effect of the above example, you can also use the grid region grid-area.

Before making a specific case, let's simply understand which grid lines the grid area is composed of. The order of the grid lines that make up the grid area is row-start/column-start/row-end/column-end. Each grid line is also separated by /.

Next, use the grid area to transform the above example, and the style code after the transformation is as follows:

Copy the code

The code is as follows:

.wrapper {

Display: grid

Grid-template-columns: 100px 10px 100px 10px 100px 10px 100px

Grid-template-rows: auto 10px auto 10px auto

}

.a {

Grid-area: 1 / 1 / 2 / 2

}

.b {

Grid-area: 1 / 3 / 2 / 4

}

.c {

Grid-area: 1 / 5 / 2 / 6

}

.d {

Grid-area: 1 / 7 / 2 / 8

}

.e {

Grid-area: 3 / 1 / 4 / 2

}

.f {

Grid-area: 3 / 3 / 4 / 4

}

.g {

Grid-area: 3 / 5 / 4 / 6

}

.h {

Grid-area: 3 / 7 / 4 / 8

}

.i {

Grid-area: 5 / 1 / 6 / 2

}

.j {

Grid-area: 5 / 3 / 6 / 4

}

This is the end of the article on "how CSS defines a grid". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how CSS defines a grid". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.