Web Front-endCSS TutorialCreate a grid in the grid layout that responds to the width of the display area (a mixed grid of px and fr)
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.
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.
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.
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.
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.
If the window width is reduced, the cell specified by fr will become narrower.
For 1fr and 2fr units, the width shrinks at a ratio of 1:2 when the width becomes wider.
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!
如何通过Css Flex 弹性布局实现不规则的网格布局Sep 28, 2023 pm 09:49 PM如何通过CSSFlex弹性布局实现不规则的网格布局在网页设计中，常常需要使用网格布局来实现页面的分割和排版，通常的网格布局都是规则的，每个网格大小相同，而有时候我们可能需要实现一些不规则的网格布局。CSSFlex弹性布局是一种强大的布局方式，它可以很容易地实现各种网格布局，包括不规则的网格布局。下面我们将介绍如何利用CSSFlex弹性布局来实现不
CSS布局指南：实现网格布局的最佳实践Oct 26, 2023 am 10:00 AMCSS布局指南：实现网格布局的最佳实践引言：在现代网页设计中，网格布局已经成为一种非常流行的布局方式。它可以帮助我们更好地组织页面结构，使其更具有层次感和可读性。本篇文章将介绍网格布局的最佳实践，以及具体的代码示例，帮助你更好地实现网格布局。一、什么是网格布局？网格布局是指通过网格将页面分成多个列和行，使得页面的元素可以方便地按照一定的规律进行排列。网格布局
如何使用HTML创建一个基本的网格布局页面Oct 21, 2023 am 10:37 AM如何使用HTML创建一个基本的网格布局页面网格布局是一种常见且实用的页面布局方式，它能够以网格的形式将页面划分为多个区域，并且能够灵活地调整区域的大小和位置。在这篇文章中，我们将介绍如何使用HTML来创建一个基本的网格布局页面，并提供具体的代码示例供参考。首先，我们需要在HTML文件中设置一个容器元素，它将作为网格布局的根元素，可以是一个div或者secti
如何使用HTML和CSS创建一个响应式图片网格布局Oct 27, 2023 am 10:26 AM如何使用HTML和CSS创建一个响应式图片网格布局在当今的互联网时代，图片占据了网络内容的重要一部分。为了展示各种类型的图片，我们需要一个有效且美观的网格布局。在本文中，我们将学习如何使用HTML和CSS创建一个响应式的图片网格布局。首先，我们将使用HTML创建一个基本的结构。以下是示例代码：<!DOCTYPEhtml><html>
CSS网格布局：使用网格布局创建复杂的网页布局Nov 18, 2023 am 10:35 AMCSS网格布局：使用网格布局创建复杂的网页布局，需要具体代码示例在现代的网页设计中，网页布局起着至关重要的作用。为了创建复杂的网页布局，设计师和开发人员需要使用优秀的工具和技术。其中，CSS网格布局是一种强大而灵活的方法，可以帮助我们轻松地创建复杂的网页布局。本文将具体介绍CSS网格布局的使用方法，并提供一些实用的代码示例。CSS网格布局是一种新的布局模式，
如何使用HTML和CSS实现网格列表布局Oct 20, 2023 pm 05:45 PM如何使用HTML和CSS实现网格列表布局在现代网页设计中，网格列表布局成为了一个非常常见的布局模式。它可以帮助我们轻松地创建出漂亮的网页，让内容清晰地排列在网页中。本文将介绍如何使用HTML和CSS来实现网格列表布局，并提供具体的代码示例。首先，我们需要使用HTML来构建网页的基础结构。以下是一个简单的例子：<!DOCTYPEhtml><
如何使用Vue实现网格布局特效Sep 22, 2023 am 10:24 AM如何使用Vue实现网格布局特效，需要具体代码示例在现代Web开发中，布局是一个非常重要的部分。而网格布局是一种常见的布局方式，能够使网页呈现出美观的排列效果。Vue作为一种流行的JavaScript框架，提供了便捷的方式来实现网格布局特效。本文将介绍如何使用Vue来实现网格布局特效，并提供代码示例。一、安装Vue和相关依赖库在开始之前，我们需要先安装Vue和
微信小程序中PHP开发的网格布局实现方法Jun 01, 2023 am 08:48 AM近年来，微信小程序已经成为了移动端开发的重要工具之一，而PHP作为一门常用于Web后端开发的语言，也逐渐成为了小程序开发中不可或缺的一部分。其中，网格布局就是小程序中常用的一种布局方式，本文将介绍使用PHP开发微信小程序网格布局的实现方法。一、了解网格布局网格布局（GridLayout）是一种基于行和列的布局方式，它可以实现图片、文本、图表等各种元素的对齐
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Atom editor mac version download
The most popular open source editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
