In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.-CSS Tutorial-php.cn

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

不言

Release： 2018-11-29 14:41:46

Original

2859 people have browsed it

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.

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

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;
    }

Copy after login

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>

Copy after login

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;
    }

Copy after login

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.

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

Reducing the window width reduces the width of the unit frame of each grid.

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

Reducing the window further, the width of the unit frame of each grid will continue to shrink

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

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;
    }

Copy after login

Display the changed HTML page. The effect shown below will be displayed.

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

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.

In grid layout, the width of the grid is specified as the ratio of the area and the width of the entire page.

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!