网格布局中以区域和页面整体的宽度的比率指定网格的宽度
在网格布局（Grid Layout）中，你可以将网格的宽度指定为显示区域或整个页面的宽度的比例，但如果将网格的宽度指定为比例，则需要使用fr为单位，下面我们来看具体的内容。
我们话不多说，直接来看具体的例子
代码如下：
编写以下HTML文件
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>说明：
在此示例中，Container类的CSS描述如下所示。我们将网格列（水平方向）设置为5列，将行（垂直方向）设置为2行。
grid-template-columns的值设置为1fr，并且通过该设置，网格的宽度按比率显示。在该示例中，由于存在五个1fr的设置，因此1fr的宽度显示为显示区域（整个页面）的宽度的1/5。
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}将HTML页面的“GridItem 1”〜“Griditem 10”的div框分配给网格的每个单元格。
显示结果
运行上面的HTML页面。将显示如下所示的效果。五个网格的宽度以相等的间隔显示。
缩小窗口宽度就减小了每个网格的单元框架的宽度。
再缩小窗口，每个网格的单元框架的宽度仍然继续缩小
最后，我们来更改以下代码中的一些值看看会发生什么情况
确认在grid-tempat-COumns属性中指定了1 fr以外的值时，将Continer类的设置更改为以下内容。
在下面的描述中，第一列，第三列，第五列为1 fr，第二列为3fr，第四列为2fr。因为整体的合计是8 fr，所以1、3、5列的单元格的宽度是显示区域（窗口宽度）的8分之一的宽度。同样的第二列是8分之3的宽度，第四列是4分之一（8分之2）的宽度。
.Container {
display: grid;
grid-template-columns: 1fr 3fr 1fr 2fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}显示已更改的HTML页面。将显示如下所示的效果。
缩小窗口宽度。随着窗口的宽度的缩小网格的宽度也会缩小。宽度减小，同时保持网格单元宽度比。
Atas ialah kandungan terperinci 网格布局中以区域和页面整体的宽度的比率指定网格的宽度. 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
1382
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 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
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>
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
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,
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.
