.box { margin: 50px auto; display: grid; grid-template-columns: 100px 100px 100px; // 3列 grid-template-rows: 50px 50px 50px; // 3行 width: 300px; height: 300px; border: 5px solid #3333; } .box div { padding: 20px; background-clip: content-box; background-color:bluevio...
4.justify-content: flex-start | center | flex-end | space-between | space-around ; 解释:元素在主轴上的对齐方式。 flex-start左对齐;center居中;flex-end右对齐;space-between两端对齐;space-around四周对齐。 5.align-items: flex-start | center | flex-end | baseline | stretch ; 解释:元素在交叉...
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}body{height:100vh;margin-top:150px;}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}.item{background:red;padding:20px;color:wheat;margin:10px;} 这样做也会根据屏幕大小自动定义列的数量。当屏...
display: grid;/* 设置列数 同时设置了列的宽度 */ grid-template-columns: 100px 100px 100px;/* 设置行数 同时设置了行的宽度 如果没有设置行数将会自动根据 元素数量自动设置*/ grid-template-rows: 100px 100px 100px;} .item { border: 1px solid black;} 1 2 3 4 5 6 7 8 ...
grid-template-areas: "a a ." "b b ." "c c c";justify-items: center;align-items: center;justify-content: center;align-content: center;}.item1 {grid-area: a;background-color: blue;}.item2 {grid-area: b;}.item {width: 50%;height: 50%;border: 1px solid black;background-color...
display: grid; grid-template-columns: 50px 50px 50px; grid-template-rows: 50px 50px 50px; } .item{ font-size: 24px; text-align: center; border: 1px solid #fff; } head 1 2
(1)网格容器(grid container)由display属性的两个特殊值(grid和inline-grid)所创建,由于它不是块级容器,因此其布局不受浮动和外边距塌陷的影响。 (2)网格项(grid item)也叫网格元素,是网格容器的子元素,注意,它的后代元素不是网格项,但它自身也能变为网格容器。
.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);place-items: center;span {border: 1px solid;}} 13. justify-content 容器内容水平位置:start、end、center、stretch、space-around、space-between、space-evenly ...
10. justify-items 单元格内容水平位置设置:stretch、start、end、center 10.1 stretch 默认单元格内容水平填充单元格 .container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); justify-items: stretch; span { border: 1px ...
/* border: 5px solid silver;*/ /* grid-template-rows: repeat(3,1fr);*/ /* grid-template-columns: repeat(3,1fr);*/ /* !*栅格间距*!*/ /* !*row-gap: 10px;*!*/ /* !*column-gap: 10px;*!*/ /* !*栅格间距简写*!*/ ...