CSS 网格是复杂布局的终极解决方案吗？

网格布局：复杂布局的现代解决方案

您寻求一种跨越非表格中的行和列的解决方案，非网格布局在之前的线程中已有详细记录。然而，随着最近的浏览器更新，情况已经发生了变化。

CSS 网格：游戏规则改变者

CSS 网格布局现已得到所有主要浏览器的完全支持，提供了针对复杂布局的强大而灵活的解决方案。它消除了更改 HTML、添加嵌套容器或设置固定容器高度的需要。

实现网格布局

1. 设置包装元素的显示属性到 grid 以启用网格布局。
2. 使用 grid-template-columns 和 grid-auto-rows 定义网格列和行。
3. 设置 grid-gap 属性以指定之间的间距元素。
4. 在元素上使用 grid-row 和 grid-column 属性来控制它们在网格中的位置。

网格布局示例

考虑以下包含 CSS 网格的代码片段：

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}

.block {
  background-color: red;
}

改进的浏览器支持

截至今天，CSS 网格完全支持：

• Chrome 57
• Firefox 52
• Safari 10
• Edge 15
• Opera 44

这个意味着您现在可以放心地使用 CSS Grid 创建复杂的布局，而不必担心浏览器兼容性问题。

以上是CSS 网格是复杂布局的终极解决方案吗？的详细内容。更多信息请关注PHP中文网其他相关文章！