Home > Article > Web Front-end > In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.
In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.
- 不言Original
- 2018-11-29 14:41:462847browse
In Grid Layout, you can specify the width of the grid as a ratio of the display area or the width of the entire page, but if you specify the width of the grid as a ratio, you need to use fr as the unit. Let’s look at the specific content below.
Let’s not say much, let’s look directly at the specific examples
The code is as follows:
Write the following HTML file
SimpleGridFr.css
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}
.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: 5 / 6;
grid-row: 1 / 2;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #95a7f5
}
.GridItem8 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #d095f5;
}
.GridItem9 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #f5aee4;
}
.GridItem10 {
grid-column: 5 / 6;
grid-row: 2 / 3;
background-color: #edc3a4;
}SimpleGridFr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="SimpleGridFr.css"/>
</head>
<body>
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
<div class="GridItem4">項目4</div>
<div class="GridItem5">項目5</div>
<div class="GridItem6">項目6</div>
<div class="GridItem7">項目7</div>
<div class="GridItem8">項目8</div>
<div class="GridItem9">項目9</div>
<div class="GridItem10">項目10</div>
</div>
</body>
</html>Description:
In this example, the CSS description of the Container class is as follows shown. We set the grid columns (horizontally) to 5 columns and the rows (vertical) to 2 rows. The value of
grid-template-columns is set to 1fr, and with this setting, the width of the grid is displayed proportionally. In this example, since there are five settings for 1fr, the width of 1fr is displayed as 1/5 of the width of the display area (the entire page).
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}Assign the div boxes of "GridItem 1" ~ "Griditem 10" of the HTML page to each cell of the grid.
Display results
Run the above HTML page. The effect shown below will be displayed. Five grid widths are displayed at equal intervals.
Reducing the window width reduces the width of the unit frame of each grid.
Reducing the window further, the width of the unit frame of each grid will continue to shrink
Finally, let’s Change some values in the following code to see what happens
Confirm that when a value other than 1 fr is specified in the grid-tempat-COumns attribute, change the settings of the Continer class to the following.
In the following description, the first column, the third column, and the fifth column are 1 fr, the second column is 3fr, and the fourth column is 2fr. Since the overall total is 8 fr, the width of the cells in columns 1, 3, and 5 is one-eighth the width of the display area (window width). Likewise the second column is 3/8ths wide and the fourth column is 1/4ths (2/8ths) wide.
.Container {
display: grid;
grid-template-columns: 1fr 3fr 1fr 2fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}Display the changed HTML page. The effect shown below will be displayed.
Reduce the window width. As the width of the window shrinks the width of the grid shrinks. The width is reduced while maintaining the grid cell width ratio.
The above is the detailed content of In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.. For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- Introduction to Grid, a tool for quickly generating various grid layouts using JS
- Detailed explanation of Grid layout in CSS
- Introduction to two methods of CSS grid layout (Grid) (with code)
- What is CSS Grid grid layout
- Detailed explanation of the usage of CSS grid layout (grid)
- How to set the minimum width of Grid Layout columns