grid布局

已于 2022-07-13 23:43:22 修改
阅读量1k 收藏 1
点赞数
文章标签： 前端
于 2022-07-13 11:57:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lv_suri/article/details/125672411
版权

grid布局概括：

flex布局是一堆布局，grid是二维布局

flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列

设置grid容器：

.container{

    Display:grid;

Grid-template-columns:100px  100px 100px;

Grid-template-rows:100px  100px 100px   }

.container{

    Display:grid;

Grid-template-columns:100px  1fr  2fr;

Grid-template-rows:100px  100px 100px   }

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:100px 100px 100px;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</body>
</html>

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        /* grid-template-columns:100px 100px 100px; */
        /* grid-template-rows:100px 100px 100px; */
        grid-template-columns:100px 1fr 2fr;
        grid-template-rows:100px 100px 100px;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</body>
</html>

grid-auto-flow:column;元素纵向排列

.container{

          display:grid;

          grid-auto-flow:column；

          grid-template-columns:100px  100px 100px;

          grid-template-rows:100px  100px 100px   }

容器属性：

gird项目在单元格中的对齐方式：

justify-items 属性        水平方向对齐方式

align-items 属性          垂直方式对齐方式

单元格在整个gird容器中的对其方式

justify-content 属性 

align-content 属性

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-template-columns:100px 100px 100px;
        justify-content: center;
        align-content: center;
    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        
</body>
</html>

grid-auto-columns 属性      将溢出行的尺寸设置

grid-auto-rows  属性           将溢出列的尺寸设置

<style>
    .container {
        display: grid;
        width: 800px;
        height: 500px;
        border: 1px solid blue;
        grid-auto-flow: column;
        grid-template-columns:100px 100px 100px;
        grid-template-rows:100px 100px 100px;
        /* 溢出行的尺寸 */
        grid-auto-rows: 50px;
        /* 溢出列的尺寸 */
        grid-auto-columns: 50px;


    }
    .item{
       border: 1px solid red ;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">9</div>
        <div class="item">9</div>
</body>
</html>

style>
      .container{
        display:grid;
        width: 800px;
        height: 500px;
        border:1px solid blue;
        /* grid-auto-flow: column; */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .item{
         border:1px solid red ;
      }
      .first{
        /* grid-column-start: 1;
        grid-column-end: 3; */
        /* 可简写成以下 */
        grid-column: 1/3;
        grid-row: 1/3;
      }
  </style>
</head>
<body>
    <div class="container">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

    </div>
</body>
</html>

<style>
      .container{
        display:grid;
        width: 800px;
        height: 500px;
        border:1px solid blue;
        /* grid-auto-flow: column; */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .item{
         border:1px solid red ;
      }
      .first{
        /* grid-column-start: 1;
        grid-column-end: 3; */
        /* 可简写成以下 */
        grid-column: 2 / 4;
        grid-row:  2 / 4;
        justify-self: center;
        align-self: center;
      }
  </style>
</head>
<body>
    <div class="container">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

    </div>
</body>
</html>

 

做一个布局案例如下;

 

<style>
    *{
      margin: 0px;
      padding:0px;
    }
    .container {
      display: grid;
      width: 800px;
      margin: 0 auto;
      border: 1px solid blue;
      grid-template-columns: 600px 200px;
      grid-template-rows: 80px  200px 200px  200px  50px; 

    }
    .item{
      border:1px solid red;
    }
    .header{
      grid-column: 1 / 3;
    }
    .aside{
      grid-row: 2 / 5;
      grid-column: 2 / 3;
    }
    .footer{
      grid-column: 1 / 3;
    }

  </style>
</head>
<body>
    <div class="container">
      <div class="item header">header</div>
      <div class="item docs">docs</div>
      <div class="item blogs">blogs</div>
      <div class="item videos">videos</div>
      <div class="item aside">aside</div>
      <div class="item footer">footer</div>


    </div>
</body>
</html>

 

 

ps笔记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
grid布局demo.html
02-02
grid布局demo.html
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
Grid 布局
最新发布
前端小白的博客
04-22 834
grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。上述代码实例中，.container元素就是网格布局容器，.item元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p元素并不是网格元素。align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。这时，浏览器会自动生成多余的网格，以便放置项目。
《十二》CSS3 Grid 网格布局
花铛
12-09 1046
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。适用于一个方向上的布局。Grid布 局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。适用于有行有列的布局。Grid 布局远比 Flex 布局强大。
grid.rar_grid布局
09-20
最简单的grid布局，九宫格有4*4条线组成,因此子元素的值为1~4
CSS Grid布局
02-01
关于前端页面布局的开发大会ppt，讲解了CSS layout中的Grid
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
阮一峰老师 CSS Grid 网格布局教程(转载)
鸭绒的博客
09-30 2万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
Grid布局
little_little0_0的博客
02-26 301
Web布局经历的四个阶段： 1、table 2、float和position定位 3、flex 4、grid grid也分为网格容器和网格项目 网格容器 display: grid 生成一个块级网格 display: inline-grid 生成一个内联网格 display: subgrid 如果你的网格容器是另一个网格的网格项，可以用这个属性表示 如果我们只是单纯地添加上面两个属性，盒子的布局...
Grid布局（网格布局）
m0_57310897的博客
02-27 4122
grid网格布局、网格布局的使用、网格布局容器属性和项目属性 以及使用方法、网格布局合并单元格、
【CSS】Grid布局
Stella的博客
07-04 327
Grid布局 定义 将网页划分成一个个网格，可以任意组合不同的网格做出各种各样的布局。 基本概念 容器和项目 容器： 采用网格布局的区域。 项目： 容器内部采用网格定位的子元素。 <div class="grid-container"> /* 容器 */ <div class="item item-1">1</div> /* ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值