search

Home >Web Front-end >CSS Tutorial >Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

不言
不言Original
2018-11-29 16:39:063328browse

This article introduces the grid generation of Grid Layout. The article will introduce the code for making a fixed-width grid. However, when creating a responsive page, you can adjust the width of the grid to the width of the page or display area. The remaining width matches.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

In this article, we will introduce the code to represent the width of the grid cell according to the width of the display when the page width and display width are responsive.

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

Let’s look at a specific example

The code is as follows:

SimpleGridPxFr.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 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: 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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridPxFr.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>
</body>
</html>

Description:

The code of 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 of column 4 is assigned a width of 1 fr, so it becomes the width of the remaining display width. 

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }

Running results

Use a web browser to display the above HTML file. The effect shown below is displayed. Displays three columns on the left side of the grid with a width of 160 pixels, and the fourth cell displays the remaining width of the page width.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

Reduce the window width of your web browser. The three columns on the left are fixed to a width of 160 pixels. The width of the rightmost fourth column cell shrinks according to the window width.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)


The width of the cells in the fourth column is narrowed according to the window width, but not less than the minimum width. If you reduce the window width from the minimum width, horizontal scroll bars will appear.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

Example when there are multiple fr cells

The code is as follows

Write The following HTML and CSS code.

SimpleGridPxEmFr.css

.Container {
    display: grid;    
    grid-template-columns: 160px 2fr 16em 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: 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;
    }

SimpleGridPxEmFr.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridPxEmFr.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>
</body>
</html>

The cell width of the grid layout frame is set to 160 pixels, 2 fr, 16 em , 1 fr. Since 160 pixels and 16 em are fixed widths, the first and third columns become fixed cells and the second and fourth column cells become responsive. The width of 2fr and 1fr is 2:1. 

.Container {
    display: grid;    
    grid-template-columns: 160px 2fr 16em 1fr;    
    grid-template-rows: 120px 120px;
    border:solid #ff6a00 1px;
    }

Running results

Use a web browser to display the above HTML file. The effect shown below is displayed.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

If the window width is reduced, the cell specified by fr will become narrower.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

For 1fr and 2fr units, the width shrinks at a ratio of 1:2 when the width becomes wider.

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)

The above is the detailed content of Create a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to achieve repeating radial gradient effect in CSS3Next article：How to achieve repeating radial gradient effect in CSS3

Related articles

See more