聊一聊 CSS Grid 布局(上)

ti138729
481 阅读4分钟

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

CSS grid 布局或 CSS grid 可以更轻松，更一致地跨浏览器创建复杂的响应式 Web 设计布局。还有其他用于控制网页布局方法的方法，例如表格，框模型和 CSS 伸缩框。尽管大多数主流浏览器都采用了 CSS grid，但目前不是官方标准。

index.html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box box_1">1</div>
        <div class="box box_2">2</div>
        <div class="box box_3">3</div>
        <div class="box box_4">4</div>
        <div class="box box_5">5</div>
        <div class="box box_6">6</div>
    </div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;

}
body{
    width: 100vw;
    height: 100vh;
    background-color: rgb(240, 223, 202);
}


.container .box{
    line-height: 48px;
    text-align: center;
    font-size: 1.75em;
    color: white;
    
}
.box_1{
    background-color: aquamarine;
}
.box_2{
    background-color:khaki;
}
.box_3{
    background-color:hotpink;
}
.box_4{
    background-color:orangered;
}
.box_5{
    background-color:orchid;
}
.box_6{
    background-color:yellowgreen;
}

第一行 grid 代码

我们给要布局的元素的父级元素添加属性 display:grid

.container{
    display: grid;
}

grid_system.png

.container{
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px 50px;
}
  • grid-template-columns 指定模块列数量，可以指定列的数量和每一个列的宽度，其中 auto 表示自动填充剩余的空间
  • grid-template-rows 的值表示 50px 50px 高度从之前指定的 48px 变为 50px

grid_system_001.png

grid-gap: 3px;

可以添加 grid-gap 给定值为 3px

grid_system_002.png

接下里可以自己随意调整值看看效果来体验一下。

.container{
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 50px 50px 200px;
    grid-gap: 3px;
}

grid_system_003.png

fraction 单位和 repeat

fraction 单位

grid-template-columns: 1fr 1fr 1fr;

grid_system_005.png

grid-template-columns: 1fr 2fr 1fr;

grid_system_006.png

fraction 是一个比例单位，缩放浏览器窗口时候，这些元素会保持比例。

repeat 函数

repeat 函数可以简化我们的定义的 coding，有了 repeat 我们就没有必要重复 1fr 3 次，其实对于 3 次还好，如果想一想重复 100 次，难道我们要重复输入 100 次 1fr。

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

grid-template-columns: 1fr 1fr 1fr;

grid_system_006.png

可以通过 repeat 来重复 6 次

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

grid_system_007.png

接下来介绍一个简便表达方式

grid-template: repeat(2,50px)/repeat(3, 1fr);

grid_system_006.png

一个经典布局

现在 web 应用大部分布局，都是下面

html 布局

<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="menu">Menu</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </div>
</body>

接下里先设置一下基础 css 文件，

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    background-color:lemonchiffon;
}

.container div{
    font-size: 2em;
    color: white;
}

.container :nth-child(1){
    background-color:burlywood;
}

.container :nth-child(2){
    background-color: violet;
}

.container :nth-child(3){
    background-color: tomato;
}

.container :nth-child(4){
    background-color: teal;
}

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-rows: repeat(2,50px);
    grid-template-columns: repeat(2,1fr);
}

grid_system_008.png

.header{
    grid-column-start: 1;
    grid-column-end: 3;
}

grid_system_010.png

可能你会问为什么是 grid-column-start: 1 和 grid-column-end: 3; 不是仅 2 列吗? 这个只要你看一眼下面图，你就知道为什么是 grid-column-start: 1 和 grid-column-end: 3; 了。

grid_system_009.png

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 50px 200px 50px;
}

grid_system_011.png

.header{
    grid-column: 1 / 3;
}
.footer{
    grid-column: 1 / 3;
}

grid-column: 1 / 3 是上面 grid-column-start: 1 和 grid-column-end: 3 的简便定义的方式。

grid_system_012.png

.header{
    grid-column: -3 / -1;
}
.footer{
    grid-column: 1 / -1;
}

为什么可以将其从 1/3 转换为 -3/-1 这个可以看看下面的图，定义-1作为结束位置的好处就是以后中间添加更多列，我们也不必修改该行的起始和终止的位置。

grid_system_015.png

grid-template-columns: 1fr 3fr;

grid_system_016.png

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 50px 200px 50px;
}

.header{
    grid-column: 1 / -1;
}
.footer{
    grid-column: 1 / -1;
}
.content{
    grid-column: 2/-1;
}

在设计时候，我们还需要考虑以后扩展性，所以我可以通过repeat(12,1fr); 结合对 content 的 grid-column: 2/-1; 定义的灵活性。

grid_system_17.png

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 50px 200px 50px;
}

.header{
    grid-column: 2 / -1;
}
.footer{
    grid-column: 1 / -1;
}
.menu{
    grid-row: 1 / 3;
}
.content{
    grid-column: 2/-1;
}

简单调整一下就可以轻松地得到我们想要的效果

grid_system_018.png

grid areas 区域设置

这是另一方式来实现布局，

.container{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 50px 200px 50px;
    grid-template-areas: "h h h h h h h h h h h h" "m c c c c c c c c c c c" "f f f f f f f f f f f f";
}

.header{
    grid-area: h;
}
.footer{
    grid-area: f;
}
.menu{
    grid-area: m;
}
.content{
    grid-area: c;
}

grid-template-areas: ". h h h h h h h h h h ." "m c c c c c c c c c c c" ". f f f f f f f f f f .";

grid_system_019.png

avatar
文章
阅读
粉丝