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

In this article, the editor introduces in detail "how to use CSS's grid". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use CSS's grid" can help you solve your doubts.

Let's take a look at the container framework first.

# (id name) {

Display:grid

Grid-template-columns: (first column width) (second column width). (width of column n)

Grid-template-rows: (the first row is high) (the second row is high). (line n is high)

}

Or

. (class name) {

Display:grid

Grid-template-columns: (first column width) (second column width). (width of column n)

Grid-template-rows: (the first row is high) (the second row is high). (line n is high)

}

There is also a way to set up an inline grid.

# (id name) {

Display:inline-grid

Grid-template-columns: (first column width) (second column width). (width of column n)

Grid-template-rows: (the first row is high) (the second row is high). (line n is high)

}

Or

. (class name) {

Display:inline-grid

Grid-template-columns: (first column width) (second column width). (width of column n)

Grid-template-rows: (the first row is high) (the second row is high). (line n is high)

}

Grid framework (project framework)

Specify the following CSS for the elements that become the grid framework.

# (id name) {

Grid-column: (start position of grid in column direction) / (end position of grid in column direction)

Grid-row: (start position of grid in row direction) / (end position of grid in row direction)

}

Or

. (class name) {

Grid-column: (start position of grid in column direction) / (end position of grid in column direction)

Grid-row: (start position of grid in row direction) / (end position of grid in row direction)

}

Or

# (id name) {

Grid-column-start: (start position of the grid in the column direction)

Grid-column-end: (end position of the grid in the column direction)

Grid-row-start: (start position of the grid in the row direction)

Grid-row-end: (end position of the grid in the row direction)

}

Or

. (class name) {

Grid-column-start: (start position of the grid in the column direction)

Grid-column-end: (end position of the grid in the column direction)

Grid-row-start: (start position of the grid in the row direction)

Grid-row-end: (end position of the grid in the row direction)

}

Description example

Use gridlines to specify the start and end positions of the grid.

In the case of the following code, the width of the cell is from the vertical line of the second grid to the vertical line of the fourth grid.

Grid-column:2/4

Code example

Create the following CSS, HTML files.

SimpleGrid.css

.Container {

Display:grid

Grid-template-columns:160px160px160px160px

Grid-template-rows:120px120px

Border:solid#ff6a001px

}

.GridItem1 {

Grid-column:1/2

Grid-row:1/2

Background-color:#ff9c9c

}

.GridItem2 {

Grid-column:2/3

Grid-row:1/2

Background-color:#ffcb70

}

.GridItem3 {

Grid-column:3/4

Grid-row:1/2

Background-color:#fffd70

}

.GridItem4 {

Grid-column:4/5

Grid-row:1/2

Background-color:#b0ff70

}

.GridItem5 {

Grid-column:1/2

Grid-row:2/3

Background-color:#7ee68d

}

.GridItem6 {

Grid-column:2/3

Grid-row:2/3

Background-color:#7ee6e2

}

.GridItem7 {

Grid-column:3/4

Grid-row:2/3

Background-color:#95a7f5

}

.GridItem8 {

Grid-column:4/5

Grid-row:2/3

Background-color:#d095f5

}

SimpleGrid.html

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Description:

The CSS description of the container below creates a grid of 4 rows x 2 rows.

.Container {

Display:grid

Grid-template-columns:160px160px160px160px

Grid-template-rows:120px120px

Border:solid#ff6a001px

}

The CSS for each element of the grid will be (GridItem1~GridItem8). We define grid cells for each grid. Change the background color for each cell of the grid.

.GridItem1 {

Grid-column:1/2

Grid-row:1/2

Background-color:#ff9c9c

}

Display the results

Use a Firefox browser to display the above HTML file. The effect shown below is displayed. Create a 2-row x 4-column grid and display the string "itemn" in each cell. In addition, you can set the background color of each cell.

After reading this, the article "how to use the grid of CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.