5分钟学会CSS Grid布局

最新推荐文章于 2023-10-25 15:37:36 发布

杜小白Zero

最新推荐文章于 2023-10-25 15:37:36 发布

阅读量532

点赞数 2

分类专栏： CSS 文章标签： CSS Grid布局响应式布局

本文链接：https://blog.csdn.net/DFF1993/article/details/79938549

版权

本文介绍了CSS Grid布局的基础知识，包括创建Grid、定义列和行、放置子元素以及响应式布局。通过实例展示了如何设置CSS Grid以实现二维网格，并解释了fr分数单位在响应式设计中的应用。

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

这是一篇快速介绍网站未来布局的文章。

CSS Grid 布局

Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。

CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。

在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础的知识。

你的第一个Grid布局

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

下面是一个 wrapper 元素，内部包含6个 items ：

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid 即可：

.wrapper {
    display: grid;
}

但是，这还没有做任

关注

专栏目录