这是一篇快速介绍网站未来布局的文章。
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;
}
但是,这还没有做任