前言
我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 本題目源自于牛客網 微信公衆号前端小歌謠
題目
Grid，即網格布局。它将頁面劃分為一個個網格，可以任意組合不同的形态，做出理想的布局效果。Grid布局與Flexbox布局的差別在于，Flexbox是根據軸線對彈性項進行排列，而Grid布局是将容器劃分為行和列，産生單元格，然後再對單元格進行操作。
采用網格布局的區域稱為容器。容器内部采用網格定位的每個子元素稱為容器項，也是單元格。劃分網格的線稱為網格線，比如，3x3的網格有4條水準網格線和4條垂直網格線。
現在給section盒子設定"display: grid"屬性，将該盒子變成一個容器。現在需要通過給該容器劃分行和列來生成單元格，給容器設定"grid-template-rows: 100px"和"grid-template-columns: repeat(2, 1fr)"兩條屬性以生成一個Nx2的網格，且每個容器項的寬度比為1:1、第一行的高度為100px（注意：實際上行高度可以不用設定，會根據每個容器項自動撐開，但如果設定了，就要考慮清除需要多少行，目前的行值100px僅為第一行，如果需要前三行都為100px，需要設定為"grid-template-rows: 100px 100px 100px"）。repeat方法可以簡化屬性值的書寫，為了友善表示比例關系，網格布局提供了fr關鍵字，該關鍵字和flex-grow頗為相似。實際上如果想固定大小，完全可以将機關全部設定為固定的px值。現在繼續給容器添加"grid-gap: 10px"屬性，該屬性為"grid-row-gap"和"grid-column-gap"兩個屬性的簡寫，分别代表行間距和列間距。
進入下一節的學習吧。
編輯
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>單列布局</title>
</head>
<style type="text/css">margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 500px;
}
header{
margin:10px auto;
width:360px;
border:1px solid black;
height:32px;
}
section{
margin:10px auto;
width:360px;
border:1px solid black;
}
footer{
margin:10px auto;
width:360px;
border:1px solid black;
height:32px;
}
</style>
<body>
<header></header>
<section><br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br</section>
<footer></footer>
</body>
</html>