CSS

什么是 Grid Grid 是一种 CSS 布局方案 将浏览器划分为一个个网格并可以任意组合 Flex 和 Grid 看似相似，但内在相差很大 Flex 是轴线布局，只能指定 Item 处于轴线某个位置 Grid 是网格布局，将容器划分为行和列，产生单元格，并指定 Item 处于某个单元格中 基本概念 row 行 column 列 grid line 网格线 cell 单元格 将容器设置为display: grid后，容器内子元素的float、diaplay: inline-block、display: table-cell、vertical-align和column-*等设置都会失效 这个游戏能帮你更好的学习 grid 容器属性 grid-template-columns 和 grid-template-rows <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> .container{ display: grid; grid-template-columns: 100px 100px 100px; /*将元素分为三列,，每一列的宽度是100px*/ grid-template-rows: 100px 100px 100px; /*将元素分为三行，每一行的高度是100px*/ /* 产生一个三行三列的网格，列宽和行高都是100px 除了使用px单位，也可以使用百分比 */ } .container > div { border: 1px solid blue; margin: 5px; } repeat() .container{ display: grid; width: 300px; height: 300px; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); } repeat()的第一个参数表示重复的次数，第二个参数表示重复的值，不过它并不是只能接受两个参数 ...