CSS網格佈局
阿新 • • 發佈：2022-03-26
什麼是CSS網格佈局？
網格佈局是最強大的CSS佈局方案
它將網頁劃分成以一個網格，可以任意組合不同的網格，做出各種各樣的佈局。
1.網格佈局是CSS3的一種佈局系統
2.和彈性佈局比較相似（但是它的功能更加強大,
難度係數高一點點)
3.網格佈局可以看作是二維佈局(Flex佈局是一維佈局)
4.同樣可以使用“align-items”，“justify-content”等屬性。
5.IE11部分支援
(1) display: grid —―建立網格容器;
(2)所有直接子元素都成為:“grid items(網格專案)”
(3）屬性:
grid-template-columns:列寬grid-template-rows:行高
效果圖：
彈性佈局和網格佈局的區別：
彈性佈局是軸性佈局 ，只能指定相對對應軸線的位置， 是一個一維佈局
網格佈局是將我們的容器劃分成了行和列產生單元格 ，然後制定專案在的單元格
應用：
HTML：
<div class="wrapper"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam est nam non perspiciatis aliquid maxime provident harum, laudantium modi cumque dignissimos cum hic amet molestias numquam doloribus quis. Perferendis saepe quis facilis delectus ullam soluta, amet sapiente est? Soluta doloribus, odit esse est quis inventore dolor! Delectus obcaecati dolores alias modi sunt blanditiis beatae architecto fugiat voluptatibus illo, distinctio, asperiores ea numquam aliquam optio officiis dolorem. Voluptates ex id velit, ipsam et corporis, ratione sed tempore, voluptatum odit dicta eius?</div> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam quibusdam aspernatur animi in enim consequatur. Non natus voluptatem sit porro repellat fugiat repellendus enim saepe est libero, ipsa magnam beatae! Sed expedita aliquam aperiam veniam beatae perferendis iusto ratione vitae.</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam est nam non perspiciatis aliquid maxime provident harum, laudantium modi cumque dignissimos cum hic amet molestias numquam doloribus quis. Perferendis saepe quis facilis delectus ullam soluta, amet sapiente est? Soluta doloribus, odit esse est quis inventore dolor! Delectus obcaecati dolores alias modi sunt blanditiis beatae architecto fugiat voluptatibus illo, distinctio, asperiores ea numquam aliquam optio officiis dolorem. Voluptates ex id velit, ipsam et corporis, ratione sed tempore, voluptatum odit dicta eius? </div> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam quibusdam aspernatur animi in enim consequatur. Non natus voluptatem sit porro repellat fugiat repellendus enim saepe est libero, ipsa magnam beatae! Sed expedita aliquam aperiam veniam beatae perferendis iusto ratione vitae. </div> <div>Hello</div> </div>
CSS：
.wrapper { display: grid; grid-template-columns: 70% 30%; /* 列間距 */ /* grid-column-gap: 1rem; */ /* 行間距 */ /* grid-row-gap: 1rem; */ /* 如果行間距和列間距相同 可以直接進行縮寫 */ grid-gap: 1rem; } .wrapper>div { background: #eee; padding: 1rem; } .wrapper>div:nth-child(odd) { background: #ddd; }
效果圖：
HTML：
<div class="wrapper"> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> </div>
CSS：
.wrapper>div { background: #eee; padding: 1rem; } .wrapper>div:nth-child(odd) { background: #ddd; } .wrapper { display: grid; /* 在設定列寬時 最好使用fr單位 */ /* grid-template-columns: 1fr 2fr 1fr; */ grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; grid-auto-rows: 100px; grid-auto-rows: minmax(100px, auto); }
效果圖：
HTML：
<div class="wrapper"> <div>Lorem ipsum dolor sit amet consectetur.</div> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut repellat eos quia sint. Quod est dolorem similique ut autem voluptates pariatur quisquam alias odio quis eos, repellendus optio voluptate dolore voluptatum quaerat minus ex in laudantium, ab eveniet iusto porro, adipisci molestiae. Rem inventore consectetur atque aperiam nisi eligendi assumenda pariatur velit, laudantium exercitationem similique. Saepe sapiente odio, excepturi pariatur autem eligendi facere doloribus, repudiandae labore, animi deleniti nihil eveniet nostrum dignissimos ad iusto. Esse dolorum commodi at eveniet deleniti? </div> <div class="nested"> <div>Lorem</div> <div>Lorem</div> <div>Lorem</div> </div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum dolor sit amet.</div> </div>
CSS：
.nested { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; grid-auto-rows: 70px; } .nested>div { border: 1px #333 solid; padding: 1rem; }
效果圖：
CSS：網格佈局：grid-template-columns
HTMl：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> </div>
CSS：
.container { /* 設定後首先不會發生變化 */ display: grid; /* 每個容器的寬度為200px */ /* grid-template-columns: 200px 200px 200px 200px; */ /* 中間的容器適配寬度 其餘兩個容器寬度為200px */ grid-template-columns: 200px auto 200px; } .item { padding: 3rem; border: 1px #ccc solid; background: #f4f4f4; font-size: 1.3rem; font-weight: bold; text-align: center; }
中間的容器適配寬度 其餘兩個容器寬度為200px
grid-template-columns: 200px auto 200px;平均分佈 grid-template-columns: auto auto auto; 簡寫 第一個引數值是重複的次數,第二個引數就是要重複的值 grid-template-columns: repeat(3, auto); 等比進行劃分：運用fr關鍵字 grid-template-columns: 1fr 2fr 1fr; 列間距 grid-gap: 1rem; 運用： HTML：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <!-- <div class="item">item 4</div> --> </div> <main> <section> <h3>歡迎來到秋褲線上</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fugit, sit consectetur tenetur vitae dolores velit nihil neque sint esse? </p> </section> <aside> <h3>Hello World</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, autem.</p> </aside> </main>
CSS：
.container { /* 設定後首先不會發生變化 */ display: grid; /* 每個容器的寬度為200px */ /* grid-template-columns: 200px 200px 200px 200px; */ /* 中間的容器適配寬度 其餘兩個容器寬度為200px */ /* grid-template-columns: 200px auto 200px; */ /* 平均分佈 */ /* grid-template-columns: auto auto auto; */ /* 簡寫 */ /* 第一個引數值是重複的次數,第二個引數就是要重複的值 */ /* grid-template-columns: repeat(3, auto); */ /* 等比進行劃分：運用fr關鍵字 */ /* grid-template-columns: 1fr 2fr 1fr; */ /* 列間距 */ grid-gap: 1rem; } .item { padding: 3rem; border: 1px #ccc solid; background: #f4f4f4; font-size: 1.3rem; font-weight: bold; text-align: center; } main { display: grid; /* 等比適配 */ grid-template-columns: 2fr 1fr; grid-gap: 1.5rem; }
效果圖：
高度：
基本HTML：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> <div class="item">item 8</div> <div class="item">item 9</div> <div class="item">item 10</div> </div>
CSS：
.container { /* 設定後首先不會發生變化 */ display: grid; /* 每個容器的高度進行等比劃分 */ grid-template-rows: 1fr 2fr 3fr; /* 等高 */ grid-auto-rows: 3fr; /* 結合使用 */ grid-template-columns: repeat(2, 1fr); } .item { padding: 3rem; border: 1px #ccc solid; background: #f4f4f4; font-size: 1.3rem; font-weight: bold; text-align: center; }
效果圖：
跨單元格：
HTML：
<div class="grid"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> <div class="item">item 8</div> <div class="item">item 9</div> <div class="item">item 10</div> <div class="item">item 11</div> <div class="item">item 12</div> <div class="item">item 13</div> <div class="item">item 14</div> <div class="item">item 15</div> </div>
CSS：
.grid { display: grid; grid-template-columns: repeat(4, 1fr); } .item { padding: 3rem; border: 1px #ccc solid; background: #f4f4f4; font-size: 1.3rem; font-weight: bold; text-align: center; } .item:first-child { /* 只是變化了單元格的邊框位置 */ /* 第幾根垂直網格線 */ grid-column-start: 1; grid-column-end: 2; /* 指上下邊框 */ /* 表示上邊框是第一根網格線 */ grid-row-start: 1; /* 表示下邊框是第三根網格線 */ grid-row-end: 3; }
效果圖：
橫跨單元格的簡便寫法：
/* 簡便寫法 */ /* item1所在的左邊框是第一根垂直網格線，並橫跨三個單元格 */ grid-column: 1/ span 3;
效果圖：
豎跨單元格的簡便寫法：
/* item1所在的上邊框是第一根水平網格線，且豎跨兩個單元格 */ grid-row: 1/span 2;
效果圖：