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

Editor to share with you how to create a grid that responds to the width of the display area in the css grid layout. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

In this article, we will introduce the code that represents the width of the grid cell according to the displayed width when the page width and display width are in response.

The first thing we need to know is that if you want to create a response grid cell, you can use fr units.

Let's take a look at specific examples.

The code is as follows:

SimpleGridPxFr.css

.Container {

Display:grid

Grid-template-columns:160px160px160px1fr

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

}

SimpleGridPxFr.html

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Description:

The code for the Container class is as follows. The layout of the grid is 4 columns and 2 rows. The grid from column 1 to column 3 is a fixed-width cell of 160 pixels. The rightmost cell in column 4 is specified as 1fr, so it becomes the width of the remaining display width.

.Container {

Display:grid

Grid-template-columns:160px160px160px1fr

Grid-template-rows:120px120px

Border:solid#ff6a001px

}

This is all the content of the article "how to create a grid that responds to the width of the display area in a css grid layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.