grid网格布局

最新推荐文章于 2024-06-26 18:58:04 发布
最新推荐文章于 2024-06-26 18:58:04 发布
阅读量289 收藏
点赞数
分类专栏： HTML5 CSS3 屏幕适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43248623/article/details/108375382
版权
HTML5 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
CSS3
10 篇文章 0 订阅
订阅专栏
屏幕适配
9 篇文章 0 订阅
订阅专栏

CSS3中的display:grid网格布局介绍

前端布局之网格gird布局（简单易懂）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-auto-flow: column;
      }
      .box > span {
        height: 100px;
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-content: center;
        justify-content: space-between;
        grid-auto-flow: column;
      }
      .box > span {
        height: 100px;
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-auto-flow: column;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
      }
      .box > span {
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-content: center;
        justify-content: space-between;
        grid-auto-flow: column;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
      }
      .box > span {
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr 2fr 3fr;
        grid-template-rows: 1fr 2fr;
      }
      .box > span {
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
    /*写法1*/
      .box {
        width: 300px;
        display: grid;
        align-items: center;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .box > span {
        padding: 31.5px 0;
        background: gray;
        text-align: center;
        font-size: 24px;
        border: 2px solid white;
      }
      /*写法2*/
       .box {
        width: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .box > span {
        background: gray;
        font-size: 24px;
        border: 2px solid white;
        display: grid;
        justify-items: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

.box {
        width: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .box > span {
        background: gray;
        font-size: 24px;
        border: 2px solid white;
        display: grid;
        justify-content: center;
        align-content: center;
      }

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      .box > span {
        background: gray;
        font-size: 24px;
        border: 2px solid white;
        display: grid;
        justify-items: center;
        align-items: center;
      }
      .item1 {
        grid-column-start: 1;
        grid-column-end: 4;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item1">1</span>
      <span class="item2">2</span>
      <span class="item3">3</span>
      <span class="item4">4</span>
      <span class="item5">5</span>
      <span class="item6">6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-gap: 5px 20px;
      }
      .box > span {
        background: gray;
        font-size: 24px;
        border: 2px solid pink;
        display: grid;
        justify-items: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item1">1</span>
      <span class="item2">2</span>
      <span class="item3">3</span>
      <span class="item4">4</span>
      <span class="item5">5</span>
      <span class="item6">6</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 50px 350px 50px;
        grid-gap: 5px;
        grid-template-areas:
          "h h h h h h h h h h h h"
          "m m 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;
        background: greenyellow;
      }
      .menu {
        grid-area: m;
        background: blue;
      }
      .content {
        grid-area: c;
        background: coral;
      }
      .footer {
        grid-area: f;
        background: purple;
      }
      .box > div {
        font-size: 24px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="header">header</div>
      <div class="menu">menu</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      #page {
        display: grid; /* 1.设置display为grid */
        width: 100%;
        height: 250px;
        grid-template-areas:
          "head head"
          "nav  main"
          "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
        grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
        grid-template-columns: 150px 1fr;
      }

      #page > header {
        grid-area: head; /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
        background-color: #8ca0ff;
      }

      #page > nav {
        grid-area: nav;
        background-color: #ffa08c;
      }

      #page > main {
        grid-area: main;
        background-color: #ffff64;
      }

      #page > footer {
        grid-area: foot;
        background-color: #8cffa0;
      }
    </style>
  </head>
  <body>
    <section id="page">
      <header>Header</header>
      <nav>Navigation</nav>
      <main>Main area</main>
      <footer>Footer</footer>
    </section>
  </body>
</html>

效果图
在这里插入图片描述

两种水平垂直居中对齐理解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-items: center;
        grid-auto-flow: column;
      }
      .box > span {
        height: 100px;
        background: gray;
        display: grid;
        /* 把自己当子格子看 */
        justify-items: center;
        align-items: center;
        /* 把内容当格子看 */
        /* justify-content: center;
        align-content: center; */

        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
    </div>
  </body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格gird布局</title>
    <style>
      .box {
        width: 300px;
        height: 600px;
        background-color: pink;
        display: grid;
        align-items: center;
        grid-auto-flow: column;
      }
      .box > span {
        height: 100px;
        background: gray;
        display: grid;
        /* 把自己当子格子看 */
        /* justify-items: center;
        align-items: center; */
        /* 把内容当子格子看 */
        justify-content: center;
        align-content: center;

        font-size: 24px;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
    </div>
  </body>
</html>

效果图

在这里插入图片描述

grid-template-areas讲解

web_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
css的grid网格布局
06-02
grid布局的所有属性
CSS Grid网格布局
最新发布
m0_65029152的博客
06-26 814
记录一下前端的grid布局，一个很有趣的布局方法；
网格布局 Grid
青蛙king的博客
12-16 4566
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
Grid网格布局
Zhuzhu123qwwe的博客
07-19 583
网格布局常见的容器属性与项目属性
Grid网格布局简单梳理
feiyu_may的博客
08-24 515
Grid 网格布局是一种强大的前端布局方案，相比于flex弹性布局，grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程 整体梳理 Grid布局将整个区域划分成一个个网格，区域内的元素可以根据网格来指定位置，下面是一个简单的示意图。 先抛开看起来很多的grid属性，我们从自己的需求出发，看自己需要什么。网格内容在容器中怎么对齐？网格怎么划分？元素在网格内怎么对齐？怎么指定某个元素的特定位置？怎么实现一个元素占据多个格子？再结合下面这张图，应该会对grid属性的大致情况有一个了解。 至于具
屏幕适配布局之grid网格布局
炑焽的博客
04-20 949
是W3C提出的一个二维布局系统。它与其他布局方式有所不同，因为它不仅可以指定容器内部多个项目的位置，还能创建更加复杂和灵活的页面布局。Grid布局可以将容器划分为“行”和“列”，形成单元格，并允许开发者指定项目所在的单元格。
grid 网格布局
静夜聆雨
09-04 411
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
grid网格布局看这一篇就够了(接近3w字的总结)
jieyucx的博客
07-28 554
在当今现代设计中，如何实现有效的布局一直是一个关键问题。这就是为什么推出了“grid网格布局”作为一种新的布局方式。使用，您可以轻松地设置复杂的网格布局，而无需使用冗长的代码或框架。本文将探讨的概念、语法和实际应用，帮助您在设计页面时更加灵活和高效。的网格布局是一种用于创建网格样式布局的布局方式。布局将网格划分为多个行和列，在网格所占空间内放置元素，并确定它们在网格中的位置。使用布局可以实现更加复杂的布局，如媒体网格、交互式网格等。因为它具有灵活性和强大的功能，所以越来越多的网站使用布局来设计它们的页面。G
Grid网格布局实例
油墨香^-^的博客
07-12 1459
Grid 布局将容器划分成"行"和"列"，产生单元格也就是项目所在。容器就是设置了 或者 的元素。项目就是容器的顶层子元素。网格线就是项目边缘的线。容器属性必须设置在容器上。设置容器为行性质或内联性质的网格布局： 设置项目之间的间隔 整个内容区域在容器里面的水平/垂直位置 项目内容在单元格中的水平/垂直位置 repeat()/minmax()函数 和 auto-fill/auto/fr关键字 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个
grid网格布局多种详细的实现方法（真的很详细）
(黎子)人生编码
06-21 1368
CSS Grid通过定义行和列的容器来创建网格布局，子元素可以很容易地放置在指定的行和列中。这种布局方式使得响应式设计和对齐更加直观和简单。
CSS Grid 网格布局教程.docx
03-30
CSS Grid 网格布局是现代网页设计中的一个重要工具，它提供了一种高效且灵活的方式来组织页面内容。相比传统的布局方式，如浮动和定位，CSS Grid 提供了二维的布局能力，可以轻松创建复杂的网格系统。 一、CSS Grid...
grid网格布局.html
07-05
简单介绍grid怎么使用的
CSS3属性之text-indent文本缩进使用详解
热门推荐
qq_43248623的博客
08-06 1万+
1、定义：text-indent 属性规定文本块中首行文本的缩进。 2、使用： 将段落的第一行缩进2em： div{text-indent:2em;} 注意: 1em等于一个汉字的大小 3、注意事项： 3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。 3−2、使用text−indent不生效的原因以及解决办法：\color{red}{3-2、使用text-indent不生效的原因以及解决办法： }3−2、使用text−indent不生效的原因以及解决办法： 原因:text-indent无法作用
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例)
qq_43248623的博客
08-27 3399
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1，vw、vh、vmin、vmax 的含义      （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区
前端布局之网格gird布局（简单易懂）
qq_43248623的博客
09-03 1492
前言 弹性布局的文章很多，但是它是解决一维布局的，面对二维就显得无力了，此时我们就需要用到网格布局。（ps：一维就是一列或者一行的布局，当你遇到九宫盒布局，此时涉及到列与行，便是二维布局了，常见于电商网站的商品展示）；看这篇文章，建议你自己建个html，跟着敲一敲，更利于理解。 为什么用网格布局？ 很多同学可能会觉得，我用浮动，定位，弹性盒模型可以实现绝大多数样式布局呀，为什么还要新学一个网格布局呢。就像你以前用jquery，为什么后来用mvvm框架呢，因为它能让我们实现起来更效率，也很利于维护。
CSS3中的display:grid网格布局介绍
qq_43248623的博客
08-26 1183
1.网格布局(grid):               它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局; 2.基本概念：               容器和项目，如图所示： <div class="con
css实现气泡文字提示框
qq_43248623的博客
10-20 685
css实现气泡文字提示框
tkinter grid网格布局
08-12
Tkinter提供了一个名为`grid`的布局管理器，用于在GUI应用程序中创建网格布局。网格布局将窗口划分为行和列，并允许将小部件放置在指定的行和列中。 以下是一个基本的使用`grid`布局的示例代码： ```python import...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值