日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

grid網格布局

作者：我年薪百萬 更新時間： 2023-10-09 編程語言

網格布局（Grid）是最強大的 CSS 布局方案。

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過復雜的 CSS 框架達到的效果，現在瀏覽器內置了。

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。

Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局，意味著可以同時處理行和列。Grid 布局遠比 Flex 布局強大。

注意：設為網格布局以后，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。

css網格布局模塊（css Grid Layout Module）提供了帶有行和列的基于網格的布局系統，它使網頁設計變得更加容易，而無需使用浮動和定位。
所有現代瀏覽器均支持網格屬性

網格元素

網格布局由一個父元素或者多個子元素構成
實例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

在這里插入圖片描述

網格布局必須有一個display屬性設置為grid或inline-grid的父元素。
網格容器的直接子元素自動成為網格項目。


網格列（Grid Columns）


網格項的垂直線被稱為列。
在這里插入圖片描述


網格行（Grid Rows）


網格項的水平線被稱為行。
在這里插入圖片描述
列 之間的線稱為列線（column lines）
行之間的線稱為行線（row lines）
在這里插入圖片描述
實例
把網格項目放在列線1，并在列線3結束它。

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

在這里插入圖片描述
把網格項目放在行線1，并在行線3結束它

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

在這里插入圖片描述

網格間隙（Grid Gaps）

每行/列之間的間隔稱為間隙。可以通過以下屬性之一來調整間隙大小。

  • grid-column-grap?屬性設置列之間的間隙

grid-column-gap: 50px;

  • grip-row-gap?設置行之間的間隙
  • grip-gap?是grip-column-grip和grip-column-grip屬性的簡寫屬性。grip-gap屬性還可用于將行間隙和列間隙設置為一個值。

.grid-container {
display: grid;
grid-gap: 50px;
}
在這里插入圖片描述

CSS網格容器

網格容器的直接子元素將自動成為網格項目。
如果需要使用HTML元素充當網格容器，您必須把display屬性設置為grip或者inline-grip。網格容器由防止在列和行內的網格項目組成。

grip-template-columns屬性定義每個列的寬度

注意：如果在 4 列網格中有 4 個以上的項目，則網格會自動添加新行并將這些項目放入其中。

grid-template-columns?屬性還可以用于指定列的尺寸（寬度）。
實例
設置這四列的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

grip-template-rows屬性定義每列的高度

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

在這里插入圖片描述

justify-content屬性用于在容器內對齊整個網格

`注意：網格的總寬度必須小于容器的寬度，這樣justify-content屬性才能效。

實例

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /* 制作小于容器的網格 */
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>justify-content 屬性</h1>

<p>請使用 <em>justify-content</em> 屬性在容器內對齊網格。</p>

<p>值 "center" 會在容器中間對齊網格：</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>

  //justify-content: space-evenly|space-around|space-between|center|start|end;

// justify-content屬性在容器內對齊網絡。space-evenly會在列之間以及列周圍流出相等的空間。

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

align-content屬性用于垂直對齊容器內的整個網格

在這里插入圖片描述
注意：網格的總高度必須小于容器的高度，這樣align-content屬性才能生效。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>align-content 屬性</h1>

<p>請使用 <em>align-content</em> 屬性垂直對齊容器內的網格。</p>

<p>值 "center" 會對齊容器中間的行：</p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>
</html>
//align-content:center|space-evently|space-around|space-between|start|end;

在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

CSS網格項目

子元素（項目）


網格容器包含網格項目，默認情況下，容器在每一行的每一列都有一個網格項目，但是可以設置網格項目的樣式，讓他們跨越多個行或列。

grid-column屬性定義將項目放在哪一列上。

可以定義項目的開始位置以及結束位置。
grid-column屬性是grip-column-start和grid-column-end屬性的簡寫屬性
如需放置某個項目，可以引用行號或者使用關鍵字“span”來定義該項目將跨越多少列。
實例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / 5;
}
</style>
</head>
<body>

<h1>grid-column 屬性：</h1>

<p>請使用 <em>grid-column</em> 屬性規定在何處放置項目。</p>

<p>Item1 將在 column 1 開始，并在 column 5 之間結束：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

在這里插入圖片描述

.item1 {
  grid-column: 1 / span 3;
}

在這里插入圖片描述

grip-row屬性定義了將項目放置在哪一行。

可以定義項目的開始位置以及結束位置

注釋：grid-row 屬性是 grid-row-start 和 grid-row-end 屬性的簡寫屬性。

如需放置項目，可以引用行號，或使用關鍵字 “span” 定義該項目將跨越多少行：
實例
使 “item1” 在 row-line 1 開始，在 row-line 4 結束：

.item1 {
  grid-row: 1 / 4;
}

在這里插入圖片描述
在這里插入圖片描述

grid-area屬性

grid-area屬性可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end屬性的簡寫屬性。

實例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>grid-area 屬性</h1>

<p>您可以使用 <em>grid-area</em> 屬性來規定在何處放置項目。</p>

<p>語法是：</p>

<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 將在 row-line 1 和 column-line 2 開始，并在 row-line 5 column-line 6 結束：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

在這里插入圖片描述
命名網格項
grid-area屬性也可用于為網格項目分配名稱。
可以通過網格容器的grid-template-areas屬性來引用命名的網格項目。

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>grid-area 屬性</h1>

<p>您可使用 <em>grid-area</em> 屬性來命名網格項目。</p>

<p>通過在網格容器上使用 <em>grid-template-areas</em>屬性，您可以在設置網格布局時引用該名稱。</p>

<p>Item1 的名為 "myArea"，并會占據全部五列：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

//注意是空格分隔

在這里插入圖片描述
實例
讓 “myArea” 跨越五列網格布局中的兩列（句號代表沒有名稱的項目）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
} 
//句號表示沒有名稱的網格項目

在這里插入圖片描述
實例
需要定義兩行的情況，在另一組撇號內定義第二行的列。
使 “item1” 跨越兩列和兩行：

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

在這里插入圖片描述
實例：命名所有項目，并制作一張隨時可用的網頁模板

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>grid-area 屬性</h1>

<p>您可使用 <em>grid-area</em> 屬性來命名網格項目。</p>

<p>通過在網格容器上使用 <em>grid-template-areas</em>屬性，您可以在設置網格布局時引用該名稱。</p>

<p>此網格布局包含六列三行：</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

在這里插入圖片描述
項目的順序(這里有點彎彎繞繞)
網格布局允許我們將項目放置在我們喜歡的任意位置。HTML代碼中的第一項不必顯示為網格中的第一項。
grid-area相當于grid-column-start/grid-row-start/grid-column-end/grid-row-end

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<h1>對項目排序：</h1>

<p>這些項目不必以與它們在 HTML 代碼中編寫的順序相同的順序顯示。</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

在這里插入圖片描述
實例
可以通過使用媒體查詢來重新排列某些屏幕尺寸的順序：
這個實例需要將窗口調整為500像素來查看效果。

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

原文鏈接：https://blog.csdn.net/qq_60893085/article/details/129017494

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新