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

Home

Web Front-end

CSS Tutorial

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

不言

Nov 29, 2018 pm 02:41 PM

grid layout

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

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.

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

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!

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

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties