grid 布局学习笔记

基本结构

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

基本用法

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

---

<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>

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

.wrapper{
    display:grid;
 }

此时还是五个div简单堆在一起。

• 在父元素里面设置grid-template-rows和grid-template-columns来设置多少行多少列。

    .wrapper{
        display: grid;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:50px 50px;
        /*创建3列2行*/
    }
  

此时是这个样子的

image.png

如果修改成

        grid-template-columns:20px 50px 100px;
        grid-template-rows:50px 50px;

image.png

*设置子元素item的属性来达到我们想要的效果

.item1{
        grid-column-start: 1;
        grid-column-end: 4;
}

item1 占据从第一条网格线开始，到第四条网格线结束的空间

image.png

我们可以看到

image.png

可以简写为

item1{
    grid=column:1/4
}

• 其他有趣的性质

---

fr 单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：

.container {
grid-template-columns: 1fr 1fr 1fr;
}

http://www.css88.com/archives/8510/comment-page-1#prop-justify-items

最后补上一些对于overflow的理解

image.png