HTML/CSS -- 利用Grid进行布局

朴灿烈づ我的快乐病毒、 2022-03-31 15:38 502阅读 0赞

Grid布局：[Grid布局知识点][Grid]

布局1：左右俩边固定，中间自适应

![20190103191803982.png][]

<style>
            .wrap{
                display: grid;
                grid-template-columns: 300px auto 300px;
                grid-template-rows: 100px;
            }
            .content-left {
                grid-column: 1 / 2;
                background: red;
            }
            .content-center {
                grid-column: 2 / 3;
                background: green;
                text-align: center;
            }
            .content-right {
                grid-column: 3 / 4;
                background: red;
            }
        </style>
        <div class = "wrap">
            <div class = "content-left"></div>
            <div class = "content-center">
                <h1>利用Grid布局</h1>
                <p>左右俩边固定，中间自适应</p>
            </div>
            <div class = "content-right"></div>
        </div>

布局2：左边固定，右边自适应

<style>
            .wrap{
                display: grid;
                grid-template-columns: 300px auto;
                grid-template-rows: 100px;
            }
            .content-left {
                grid-column: 1 / 2;
                background: red;
            }
            .content-right {
                grid-column: 2 / 3;
                background: green;
                text-align: center;
            }
        </style>
        <div class = "wrap">
            <div class = "content-left"></div>
            <div class = "content-right">
                <h1>利用Grid布局</h1>
                <p>左边固定，右边自适应</p>
            </div>
        </div>

同理我们可以实现右边固定，左边自适应

布局3：上下固定，中间自适应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

<style>
            .wrap{
                display: grid;
                height: 100%;
                grid-template-columns: 300px ;
                grid-template-rows: 100px auto 100px;
            }
            .content-top {
                grid-row: 1 / 2;
                background: red;
            }
            .content-center{
                grid-row: 2 / 3;
                background: green;
                text-align: center;
                 
            }
            .content-bottom {
                grid-row: 3 / 4;
                background: red;
                
            }
        </style>
        <div class = "wrap">
            <div class = "content-top"></div>
            <div class = "content-center">
                <h1>利用Grid布局</h1>
                <p>上下固定，中间自适应</p>
            </div>
            <div class = "content-bottom"></div>
        </div>

上面只是Grid布局得简单应用，对于二维布局，Grid可以大显身手。

熟练掌握Flex,Grid布局是我们得基本技能。

熟练得说出下面每个属性的含义，是掌握Grid布局的前提。

Grid Container 的全部属性

*  display
 *  grid-template-columns
 *  grid-template-rows
 *  grid-template-areas
 *  grid-template
 *  grid-column-gap
 *  grid-row-gap
 *  grid-gap
 *  justify-items
 *  align-items
 *  justify-content
 *  align-content
 *  grid-auto-columns
 *  grid-auto-rows
 *  grid-auto-flow
 *  grid

Grid Items 的全部属性

*  grid-column-start
 *  grid-column-end
 *  grid-row-start
 *  grid-row-end
 *  grid-column
 *  grid-row
 *  grid-area
 *  justify-self
 *  align-self

[Grid]: https://segmentfault.com/a/1190000012889793?utm_source=tag-newest
[20190103191803982.png]: /images/20220331/e6bad0ab215d48ccbeea680404ac981f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220331/d3a44103a890464eba45efdf8784cb70.png

发表评论取消回复

表情：

评论列表（有 0 条评论，502人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS Grid布局

CSS Grid布局][CSS Grid] 转载于:https://www.cnblogs.com/hool/p/11362335.html [CSS Grid]:...

太过爱你忘了你带给我的痛/ 2024年04月20日 10:55/ 0 赞/ 77 阅读

相关 HTMLCSS学习笔记（二十三）GRID布局

GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的

拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 73 阅读

相关 Grid网格布局

简介 > Flex布局时一维的布局，即水平或垂直方向的布局。而Grid布局则划分成“行”和“列”，产生单元格，可以看作是二维的布局。Grid布局远比Flex布局强大

系统管理员/ 2023年01月03日 04:11/ 0 赞/ 221 阅读

相关 css grid 布局

[css grid][] CSS Grid 网格布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 F

小鱼儿/ 2022年12月10日 03:35/ 0 赞/ 269 阅读

相关 css grid布局_使用CSS Grid进行Web表单布局的好处

css grid布局 Form layout and design is a fundamental yet frustrating part of web design a

你的名字/ 2022年12月03日 09:21/ 0 赞/ 219 阅读

相关 css grid布局

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

爱被打了一巴掌/ 2022年11月21日 09:56/ 0 赞/ 218 阅读

相关 Grid 布局

这是一篇快速介绍网站未来布局的文章。 ![CSS Grid 布局][CSS Grid] Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具

Dear 丶/ 2022年04月16日 05:05/ 0 赞/ 282 阅读

相关 HTML/CSS -- 利用Grid进行布局

Grid布局：[Grid布局知识点][Grid] 布局1：左右俩边固定，中间自适应 ![20190103191803982.png][] <style>

朴灿烈づ我的快乐病毒、/ 2022年03月31日 15:38/ 0 赞/ 503 阅读

相关使用 Grid 进行常见布局

`grid` 布局是W3C提出的一个二维布局系统，通过 `display: grid` 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 `g

亦凉/ 2022年03月14日 10:46/ 0 赞/ 270 阅读

相关使用 Grid 进行常见布局

`grid` 布局是W3C提出的一个二维布局系统，通过 `display: grid` 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 `g

朱雀/ 2022年01月18日 23:47/ 0 赞/ 264 阅读