<!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="item1">item1</div><!-- <div class="item2">item2</div><div class="item3">item3</div><div class="item4">item4</div><div class="item5">item5</div><div class="item6">item6</div><div class="item7">item7</div><div class="item8">item8</div><div class="item9">item9</div> --></div><style>/* grid容器 */.container{width: 24em;height: 32em;background-color: lightcyan;display: grid;/* grid-template-columns: 8em 8em 8em;grid-template-rows: 8em 8em 8em; *//* 等比例划分可以简化 */grid-template-columns:repeat(3,8em);grid-template-rows:repeat(4,8em);/* fr比例,直接等比例划分 */grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);}/* grid容器的子元素：.item 叫 grid项目 */.container > .item1{background-color: violet;/* 默认位置 *//* grid-row:起始行 、结束行 *//* grid-row:1/2;grid-column: 1/2;/* 默认占用一行，可以省略后面的 *//* grid-row:2;grid-column: 2; *//* 网格区域 *//* grid-row:2/4;grid-column: 2/4; *//* 跨越行列表示 *//* grid-row:1/ span 3;grid-column: 2/span 2; *//* 将上面的创建网格区域的属性进行简化 *//* grid-area: 行开始/列开始/行结束/列结束; */grid-area: 2/2/3/4;}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
