<!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>Grid网格布局2</title></head><body><div class="container"><!-- div.item${item$}*9 --><div class="item">item1</div><div class="item">item2</div><div class="item">item3</div><div class="item">item4</div><div class="item">item5</div><div class="item">item6</div><div class="item">item7</div><div class="item">item8</div><div class="item">item9</div><div class="item">item10</div><div class="item">item11</div><!-- div.item{item$@16}*2 --></div><style>/* grid容器 */.container{width: 30em;height: 30em;background-color: lightcyan;display: grid;/* fr比例,直接等比例划分 */grid-template-columns:repeat(3,10em);grid-template-rows:repeat(3,10em);/* gap:行间距，列间距 */gap:10px;/* gap:3px 3px; */width: 40em;height: 50em;/* 隐式网格：容纳超出显式网格的项目 *//* 当前的排列规则是行优先，现在一行排列，再换行显示 *//* grid-auto-flow: column; */grid-auto-rows: 10em;grid-auto-columns: 10em;/* 对齐的前提是要有剩余空间分配 *//* 对齐的第二个前提：要有参照物，跟谁对齐grid项目对齐有两个参照物：容器？项目中的单元格？ *//* 1.所有项目在容器中的对齐方式 *//* place-content: 垂直方向对齐方式，水平方向对齐方式; */place-content: start start;place-content: center center;/* 容器中的空间，还可以把剩余空间在所有项目中分配 */place-content: space-between space-around;place-content: space-between;/* 2.所有项目在所在单元格中的对齐方式 *//* 对齐也是要有空间才可以对齐 */place-items: center;}/* grid容器的子元素：.item 叫 grid项目 */.container > .item{background-color: violet;/* margin: .1rem; 不可行的，要用gap */width: 6em;height: 6em;}.container > .item:nth-of-type(6){background-color: yellow;place-self: start end;}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
