聊一聊 CSS Grid 布局(中)今天继续上一次分享，随着逐渐了解 grid 系统，发现 grid 系统强大之处。今天

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天继续上一次分享，随着逐渐了解 grid 系统，发现 grid 系统强大之处。今天就和大家继续分享 grid 系统给我们带来的惊喜。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="box box_coral">1</div>
        <div class="box box_corn">2</div>
        <div class="box box_aqua">3</div>
        <div class="box box_coral">4</div>
        <div class="box box_corn">5</div>
        <div class="box box_aqua">6</div>
        <div class="box box_coral">7</div>
        <div class="box box_corn">8</div>
        <div class="box box_aqua">9</div>
        <div class="box box_coral">10</div>
        <div class="box box_corn">11</div>
        <div class="box box_aqua">12</div>
    </div>
</body>
</html>

.container{
    height: 100vw;
    background-color: lemonchiffon;
}

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(6,100px);
    grid-template-rows: repeat(2,100px);
}
.box{
    font-size: 1.75em;
    color: white;
    font-weight: 600;
    line-height: 100px;
    text-align: center;
}

.box_coral{
    background-color: coral;
}

.box_corn{
    background-color: cornflowerblue;
}

.box_aqua{
    background-color: aquamarine;
}

上一次我们学习到 fraction 参数可以让每一个 cell 的宽度自动调节大小来适应浏览器的宽度。

grid-template-columns: repeat(6,1fr);

浏览器宽度调大时，每一个小 cell 宽度也随之拉长。

浏览器宽度调小时，每一个小 cell 宽度也随之压缩。

有时候我们有一种需求，就是我们保持每一个 cell 的宽度大小固定都是 100px 通过增加或者减少 cell 数量来适应浏览器宽度调到

grid-template-columns: repeat(auto-fit,100px);

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    grid-template-rows: 100px 100px;
    grid-auto-rows: 100px;
}

相册效果

对于图片展示页面，可能图片大小不一，有大有小，有长有宽。

<body>
    <div class="container">
        <div class="box box_coral">1</div>
        <div class="box box_corn">2</div>
        <div class="box box_aqua vertical">3</div>
        <div class="box box_coral">4</div>
        <div class="box box_corn">5</div>
        <div class="box box_aqua vertical">6</div>
        <div class="box box_coral">7</div>
        <div class="box box_corn big">8</div>
        <div class="box box_aqua">9</div>
        <div class="box box_coral">10</div>
        <div class="box box_corn horizonal">11</div>
        <div class="box box_aqua">12</div>
        <div class="box box_aqua">13</div>
        <div class="box box_aqua horizonal">14</div>
        <div class="box box_aqua">15</div>
        <div class="box box_aqua big">16</div>
        <div class="box box_aqua">17</div>
        <div class="box box_aqua">18</div>
    </div>
</body>

.horizonal{
    grid-column: 1 / span 2;
}

.horizonal{
    grid-column: auto / span 2;
}

.vertical{
    grid-row: auto / span 2;
}

.vertical{
    grid-row:  span 2;
}

.horizonal{
    grid-column:  span 2;
}

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    grid-auto-rows: 75px;
    grid-auto-flow: dense;
}