网格布局中创建响应显示区域宽度的网格（px和fr的混合网格）
这篇文章介绍了Grid Layout的网格代，文章中将会介绍制作固定宽度的网格的代码，但在创建响应式页面时，则可以将网格的宽度与页面或显示区域的剩余宽度相匹配。
在本文中，我们将介绍在页面宽度和显示宽度是响应的情况下，根据显示的宽度来表示网格单元格的宽度的代码。
我们首先要知道的是，如果要创建一个响应网格单元，可以使用fr单位。
我们来看具体的实例
代码如下：
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>说明：
Container类的代码如下。网格的布局是4列2行。从第1列到第三列的网格是160像素的固定宽度的单元格。第4列的最右边的单元格是被指定为1 fr，因此它变为剩余显示宽度的宽度。
.Container {
display: grid;
grid-template-columns: 160px 160px 160px 1fr;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}运行结果
使用Web浏览器显示上述HTML文件。显示如下所示的效果。显示网格左侧的三列，宽度为160像素，第四个单元格显示页面宽度的剩余宽度。
缩小Web浏览器的窗口宽度。左侧的三列固定为160像素的宽度。最右边的第四列单元格的宽度根据窗口宽度收缩。
第四列中的单元格的宽度根据窗口宽度变窄，但不小于最小宽度。如果从最小宽度减小窗口宽度，将显示水平滚动条。
当有多个fr的单元格时的示例
代码如下
编写以下HTML和CSS代码。
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>网格布局框架的单元格宽度设置为160像素，2 fr，16 em，1 fr。由于160个像素和16个em是固定宽度，所以第一和第三列成为固定单元，第二和第四列单元格变为响应。2fr和1fr的宽度为2：1。
.Container {
display: grid;
grid-template-columns: 160px 2fr 16em 1fr;
grid-template-rows: 120px 120px;
border:solid #ff6a00 1px;
}运行结果
使用Web浏览器显示上述HTML文件。显示如下所示的效果。
如果缩小窗口宽度，则fr指定的单元格将变窄。
对于1fr和2fr的单元，宽度以宽度变为1：2的比率收缩。
Atas ialah kandungan terperinci 网格布局中创建响应显示区域宽度的网格（px和fr的混合网格）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana untuk melaksanakan susun atur grid yang tidak teratur melalui susun atur CSS Flex
Sep 28, 2023 pm 09:49 PM
Bagaimana untuk melaksanakan susun atur grid yang tidak teratur melalui reka letak elastik CSSFlex, selalunya perlu menggunakan reka letak grid untuk mencapai pembahagian halaman dan susun atur biasanya, dan setiap grid adalah saiz yang sama beberapa susun atur grid yang tidak teratur. Reka letak anjal CSSFlex ialah kaedah susun atur berkuasa yang boleh melaksanakan pelbagai susun atur grid dengan mudah, termasuk susun atur grid yang tidak teratur. Di bawah ini kami akan memperkenalkan cara menggunakan susun atur elastik CSSFlex untuk mencapai yang berbeza
Panduan Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Grid
Oct 26, 2023 am 10:00 AM
Panduan Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Grid Pengenalan: Dalam reka bentuk web moden, reka letak grid telah menjadi kaedah reka letak yang sangat popular. Ia boleh membantu kami menyusun struktur halaman dengan lebih baik dan menjadikannya lebih hierarki dan boleh dibaca. Artikel ini akan memperkenalkan amalan terbaik reka letak grid dan contoh kod khusus untuk membantu anda melaksanakan reka letak grid dengan lebih baik. 1. Apakah susun atur grid? Reka letak grid merujuk kepada membahagikan halaman kepada berbilang lajur dan baris melalui grid, supaya unsur-unsur halaman boleh disusun dengan mudah mengikut peraturan tertentu. susun atur grid
Cara membuat halaman susun atur grid asas menggunakan HTML
Oct 21, 2023 am 10:37 AM
Cara menggunakan HTML untuk mencipta halaman reka letak grid asas Reka letak grid ialah kaedah reka letak halaman yang biasa dan praktikal Ia boleh membahagikan halaman kepada berbilang kawasan dalam bentuk grid, dan boleh melaraskan saiz dan kedudukan kawasan secara fleksibel. Dalam artikel ini, kami akan memperkenalkan cara menggunakan HTML untuk mencipta halaman susun atur grid asas dan menyediakan contoh kod khusus untuk rujukan. Pertama, kita perlu menetapkan elemen kontena dalam fail HTML, yang akan berfungsi sebagai elemen akar susun atur grid, yang boleh menjadi div atau secti
Cara membuat susun atur grid imej responsif menggunakan HTML dan CSS
Oct 27, 2023 am 10:26 AM
Cara Membuat Reka Letak Grid Imej Responsif Menggunakan HTML dan CSS Dalam era Internet hari ini, imej menduduki bahagian penting dalam kandungan web. Untuk memaparkan pelbagai jenis imej, kami memerlukan susun atur grid yang berkesan dan cantik. Dalam artikel ini, kita akan belajar cara membuat reka letak grid imej responsif menggunakan HTML dan CSS. Pertama, kita akan membuat struktur asas menggunakan HTML. Berikut ialah kod contoh: <!DOCTYPEhtml><html>
Reka Letak Grid CSS: Buat susun atur halaman web yang kompleks menggunakan reka letak grid
Nov 18, 2023 am 10:35 AM
Reka Letak Grid CSS: Menggunakan susun atur grid untuk mencipta reka letak halaman web yang kompleks memerlukan contoh kod khusus Dalam reka bentuk web moden, reka letak halaman web memainkan peranan penting. Untuk mencipta reka letak web yang kompleks, pereka bentuk dan pembangun perlu menggunakan alat dan teknik yang sangat baik. Antaranya, reka letak grid CSS ialah kaedah yang berkuasa dan fleksibel yang boleh membantu kami membuat reka letak halaman web yang kompleks dengan mudah. Artikel ini akan memperkenalkan penggunaan susun atur grid CSS secara terperinci dan menyediakan beberapa contoh kod praktikal. Susun atur grid CSS ialah mod susun atur baharu,
Cara menggunakan Vue untuk melaksanakan kesan susun atur grid
Sep 22, 2023 am 10:24 AM
Cara menggunakan Vue untuk melaksanakan kesan susun atur grid memerlukan contoh kod khusus Dalam pembangunan web moden, reka letak adalah bahagian yang sangat penting. Susun atur grid ialah kaedah susun atur biasa yang boleh menjadikan halaman web menyajikan susunan yang cantik. Sebagai rangka kerja JavaScript yang popular, Vue menyediakan cara yang mudah untuk melaksanakan kesan susun atur grid. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan susun atur grid dan memberikan contoh kod. 1. Pasang Vue dan perpustakaan bergantung yang berkaitan Sebelum memulakan, kita perlu memasang Vue dan
Bagaimana untuk melaksanakan susun atur senarai grid menggunakan HTML dan CSS
Oct 20, 2023 pm 05:45 PM
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur senarai grid Dalam reka bentuk web moden, susun atur senarai grid telah menjadi corak susun atur yang sangat biasa. Ia boleh membantu kami membuat halaman web yang cantik dengan mudah dan membiarkan kandungan disusun dengan jelas dalam halaman web. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak senarai grid dan memberikan contoh kod khusus. Pertama, kita perlu menggunakan HTML untuk membina infrastruktur halaman web. Berikut ialah contoh mudah: <!DOCTYPEhtml><
Kaedah pelaksanaan susun atur grid dibangunkan dalam PHP dalam program mini WeChat
Jun 01, 2023 am 08:48 AM
Dalam tahun-tahun kebelakangan ini, program mini WeChat telah menjadi salah satu alat penting untuk pembangunan terminal mudah alih, dan PHP, sebagai bahasa yang biasa digunakan untuk pembangunan back-end Web, secara beransur-ansur menjadi bahagian yang sangat diperlukan dalam pembangunan program mini. Antaranya, susun atur grid adalah kaedah susun atur yang biasa digunakan dalam program mini Artikel ini akan memperkenalkan kaedah pelaksanaan menggunakan PHP untuk membangunkan susun atur grid untuk program mini WeChat. 1. Fahami Grid Layout Grid Layout (GridLayout) ialah kaedah susun atur berdasarkan baris dan lajur, yang boleh mencapai penjajaran pelbagai elemen seperti gambar, teks, carta, dll.
