CSS Grid网格布局是什么

藏色散人原创: 2018-11-12 17:31:136598浏览

本篇文章主要给大家介绍CSS Grid布局即网格布局的基础知识。

推荐参考学习：《CSS教程》

对于前端的初学者来说，CSS Grid布局的概念可能有点陌生。其实也是非常容易理解的。我们都知道css是布局网页样式的，通常都要考虑到网页兼容、盒子浮动、定位等hack实现问题，而css Grid布局也就是css 网格布局，是首个特地为解决这种问题而创造出来的模块。

简单地说，CSS Grid布局就是一个二维的基于网格的布局系统，它可以同时处理列（Columns）和行（rows），目标是改变我们基于网格设计的用户接口方式。

下面我们就通过简单的Grid 布局例子给大家介绍Grid网格布局：

Grid 布局的简单代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid网格布局示例</title>
</head>
<style>
 .wrapper {
        display: grid;
 grid-template-rows: 100px 100px 100px;
 }
    .item1 {
        grid-column-start: 1;
 grid-column-end: 4;
 }
    .item1{

        background: #333333;

 }
</style>
<body>
<div class="wrapper">
    <div class="item1" style=" background: #745A74;">大导航</div>
    <div class="item2" style="background: #CCCC66">2</div>
    <div class="item3" style="background: #FFCFCF">3</div>
    <div class="item4" style="background: aquamarine">4</div>
    <div class="item5" style="background: chartreuse">5</div>
    <div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>

效果如下图：

上述代码中，我们给指定的容器设置display:grid属性表示开始使用Grid布局，也就是将元素定义为网格容器，并设置列（grid-template-columns）和行（grid-template-rows）的大小，然后按grid-column和grid-row把子元素放进容器中。

重要属性介绍：

grid-template-rows 属性是基于网格行的维度，定义网格线的名称和网格轨道的尺寸大小。

grid-template-columns 属性是基于网格列的维度，定义网格线的名称和网格轨道的尺寸大小。

Grid-column-start 属性指定网格项在网格列中的开始位置，方法是为其网格位置贡献一行、一个跨度或自动。此起始位置定义网格区域的块起始边缘。

Grid-column-end 属性通过向网格放置贡献线、跨度或无（自动）来指定网格项在网格列中的结束位置，从而指定其网格区域的块结束边缘。

本篇文章就是关于CSS Grid网格布局的简单基础知识介绍，具有一定的参考价值，希望对需要的朋友有所帮助！

以上是CSS Grid网格布局是什么的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css如何实现单边阴影效果下一篇：弹性盒子布局flex是什么

查看更多