5分钟学会 CSS Grid

最新推荐文章于 2024-08-02 12:09:11 发布

羽灵光Fealight

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量399

点赞数

分类专栏：基础-Basic CSS 文章标签： css bootstrap 网页设计浏览器布局

本文链接：https://blog.csdn.net/snake89322/article/details/78892284

版权

本文详细介绍了如何在5分钟内掌握CSS Grid布局，包括基本的行和列设置，响应式设计以及组合布局。通过实例展示了如何创建和布局grid items，强调了grid line的概念，以及如何实现复杂和响应式的grid设计。CSS Grid超越了Bootstrap，成为现代网页设计的主流布局工具，且主流浏览器均提供良好支持。

摘要由CSDN通过智能技术生成

栅格（Grid）布局是现在主流的网页设计，CSS Grid 模块是目前最简单的布局创建模式，单从布局方面已经超越了 Bootstrap。

这个布局的兼容性目前也很不错，主流浏览器均兼容，包括 App 原声的 WebView 模块内核。

不多说了，直接开始！

第一个布局

CSS Grid 布局的核心 DOM 结构为 wrapper（parent）和 items（children）；wrapper 为实际的 grid 容器，items 则为 grid 容器中的内容元素。

我们在一个 wrapper 容器中创建 6 个 item：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</