CSS Grid网格布局是什么-pengetahuan css-php.cn

Rumah

pengaturcaraan harian

pengetahuan css

CSS Grid网格布局是什么

藏色散人

Nov 12, 2018 pm 05:31 PM

本篇文章主要给大家介绍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>

Salin selepas log masuk

效果如下图：

上述代码中，我们给指定的容器设置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网格布局的简单基础知识介绍，具有一定的参考价值，希望对需要的朋友有所帮助！

Atas ialah kandungan terperinci CSS Grid网格布局是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn