Grid布局

最新推荐文章于 2024-04-25 20:19:13 发布
最新推荐文章于 2024-04-25 20:19:13 发布
阅读量304 收藏
点赞数
分类专栏： 前端 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53226639/article/details/129395022
版权
本文详细介绍了CSSGrid布局的使用，包括grid-template-columns、grid-template-rows、grid-gap、minmax、grid-column和grid-row等属性，以及如何通过媒体查询实现响应式设计。内容涵盖了从基本概念到高级技巧，帮助开发者掌握二维布局系统。
摘要由CSDN通过智能技术生成

title: Grid布局
categories: 前端

1. 强大的Grid布局

感谢MDNN和Codepen，授人鱼不如授人渔。
MDN
MDN
Codepen

2. 简单的认识

网格布局是一种二维网格布局系统（flex布局为一维布局系统），把一个元素作为网格容器只要让dispaly: grid即可；网格容器是由一些水平和垂直的线构成的，每四条线构成一个轨道，也就是一个格子。格子与格子的距离叫做沟槽，个人认为也叫做margin，沟槽有两种，水平方向格子与格子的距离(row-gap)，垂直方向格子与格子的距离(cloumn-gap)。

MDN官网的图

2.1 grid-template-columns

grid-template-columns定义了一个grid网格容器有多少列,所以应用在容器上，具体使用方式如下。
grid-template-rows属性

2.1.1 使用具体像素值定义列宽

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: 0.9em/1.2 Arial, Helvetica, sans-serif;

}
.container {
  /* 开启网格布局*/  
  dispaly: grid;
  /* 定义3列,每一列的大小为200px, 多余的会自动换行，且无论网格如何缩小都有3列*/    
  grid-template-columns: 200px 200px 200px;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

<h1>Simple grid example</h1>
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

image-20230305190451357

2.1.2 以fr为单位定义列宽

grid-template-columns: 1fr 1fr 1fr 1fr;

image-20230305191650734

grid-template-columns: 2fr 2fr 1fr 1fr;

image-20230305191717449

2.1.3 像素值与fr单位混合使用

.container {
    display: grid;
    /*第一列和最后一列宽度为200px, 中间列宽度为网格容器宽度-400px*/
    grid-tempalte-columns: 200px 1fr 200px
}

image-20230305192053768

  • 使用repeat函数

repeat函数

.container {
    display: grid;
    /*重复3列，每一列大小一样*/
    grid-template-coluns: repeat(3, 1fr)
    /*重复3组，每一组中有2列，宽度为1比2*/    
    grid-template-coluns: repeat(3, 1fr 2fr)
}

image-20230305193303466

2.1.4 使用repeat函数自适应列

.container {
  display: grid;
  grid-template-columns:  repeat(auto-fit, minmax(100px, 1fr));
  /*最小宽度为100px,随着内容增大*/  
  grid-template-columns:  repeat(auto-fit, minmax(100px, auto));
  background-color: red; 
}

image-20230305195434464

image-20230305201312201

3. grid-gap

指定格子之间的距离

.container {
  /* 开启   */
  display: grid;
  grid-template-columns:  1fr 1fr 1fr;
  background-color: red;
  grid-gap: 20px; /*等于grid-row-gap:20px grid-column-gap:20px*/
}

image-20230305201738333

4. minmax

定义轨道的最小值和最大值

minmax函数

.container {
  display: grid;
  /*最小宽度取最小的那个格子,最大宽度不超过200px*/
  grid-template-columns: minmax(max-content, 300px) minmax(min-content, 200px) 150px
  background-color: red;
  grid-gap: 20px;
}

image-20230305202931072

5. grid-column和grid-row

使用网格线放置元素, 指定竖线的起始未知和结束位置和横线的始末位置。也可以给网格线命名，然后直接使用网格线的名字定位元素。

grid-template-areas
grid-column
grid-row

image-20230305210736180

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
   <div class="box4">Four</div>
   <div class="box5">Five</div>
</div>

.wrapper {
    display: grid;
    width: 90%;
    ax-width: 900px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 50px;
}
.box1 {
    grid-column-start: 1; /*列从第1条线开始第4线结束，可以看出是垮了整个轨道*/
    grid-column-end: 4;
    grid-row-start: 1; /*行从第1条线开始第3线结束*/
    grid-row-end: 3;
    /*
    	等价于 (grid-column: 1/4 和 grid-row: 1/3)
    	或者 (grid-column: 1/-1 和 grid-row: 1/3) 
        或者 grid-column: 1/ span 3 span表示跨越的轨道数
    */
    
    /*
    * 或者等价于 grid-area: 1 / 1 / 4 / 3 
    * row-start/column-statrt/row-end/column-end
    */
}
.box2 {
    grid-column-start: 1; 
    /*
    * 当没有指明结束线时默认延申一个轨道，即end = start + 1
    * 即gird-column-end: 2
    */
    grid-row-start: 3;
    grid-row-end: 5;
    /*
    * 反向跨越
    * grid-row-start: span 2
    * grid-row-end: 5
    */
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230305220245873

6. 模板区域

<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

.wrapper {
    display: grid;
    /*
    * 指定9列，与grid-template-areas相对应, 简单来说一行对应9个单词
    */
    grid-template-columns: repeat(9, 1fr); /*9列*/
    grid-auto-rows: minmax(100px, auto);
    /*
    * 网格容器使用grid-template-areas
    */
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}
.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

image-20230305225703896

6.1 流出空白区域

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    /*
    * 流出空白的区域：使用点代替
    */
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  .  .  ft   ft   ft   ft   ft   ft";
}

image-20230305231021182

6.2 使用媒体查询改变布局

/*
* 当媒体宽度大于500px时的布局样式
* 
*/
@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: repeat(9, 1fr);
        grid-template-areas:
          "hd hd hd hd   hd   hd   hd   hd   hd"
          "sd sd sd main main main main main main"
          "sd sd sd  ft  ft   ft   ft   ft   ft";
    }
}
/*
* 当媒体的宽度大于700时的布局样式
*/
@media (min-width: 700px) {
    .wrapper {
        grid-template-areas:
          "hd hd hd   hd   hd   hd   hd   hd hd"
          "sd sd main main main main main ft ft";
    }
}

6.3 网格简写规则

grid-template可以同时设置三个属性: grid-template-rows grid-template-columns grid-template-areas

.wrapper {
    display: grid;
    grid-template:
        /*grid-template-areas*/
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto) /*grid-template-columns*/
      "sd sd sd main main main main main main" minmax(100px, auto) /*三行表示 grid-template-rows*/
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; /*轨道清单*/
}

grid表示以下属性的简写

image-20230305233948714

7. 自动定位

7.1 grid-auto-rows

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /*自动增长,每行的宽度是100px*/  
  grid-auto-rows: 100px;
    
  grid-auto-rows: 100px;
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230307221213162

7.2 结合minmax

<div class="wrapper">
     <div>One</div>
     <div>Two</div>
     <div>Three</div>
     <div>Four
     <br>This cell
     <br>Has extra
     <br>content.
     <br>Max is auto
     <br>so the row expands.
     </div>
     <div>Five</div>
</div>

.wrapper {
  display: grid;
  width: 500px;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* 每一行最小100px, 延申的时候自动*/
  grid-auto-rows: minmax(100px, auto)	
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230307221842084

7.3 明确行大小

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
   <div>Nine</div>
   <div>Ten</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 50px 100px;
  width: 600px;
  margin: 0 auto
}

div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230307222406125

7.4 列方向优先占位

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

.wrapper {
  display: grid;
  gap: 10px;
  /*3行，每一行100px*/  
  grid-template-rows: repeat(3, 100px);
  /*让排列方向改变为垂直方向*/
  grid-auto-flow: column;
  /*列按照这样的方式自动增长*/  
  grid-auto-columns: 300px 100px;
  margin: 0 auto;
  width: 720px
}

div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230307223041496

7.5 含有定位属性的项目

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
   <div>Nine</div>
   <div>Ten</div>
   <div>Eleven</div>
   <div>Twelve</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
 .wrapper div:nth-child(2) {
   /* 定位第2个元素*/  
   grid-column: 3;
   grid-row: 2 / 4;
 }
 .wrapper div:nth-child(5) {
   /*定位第5个元素*/  
   grid-column: 1 / 3;
   grid-row: 1 / 3;
}
/*剩下的元素自动占满其他剩余的空间*/

image-20230307224340705

7.5 排列不下

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
   <div>Nine</div>
   <div>Ten</div>
   <div>Eleven</div>
   <div>Twelve</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
  width: 900px;
  margin: 0 auto
}
.wrapper div:nth-child(4n+1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
 .wrapper div:nth-child(2) {
   grid-column: 3;
   grid-row: 2 / 4;
 }
 .wrapper div:nth-child(5) {
   grid-column: 1 / 3;
   grid-row: 1 / 3;
}

div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230307225550555

7.6 grid-auto-flow: dense

加上这个属性上面的图就会变成下面的图。

image-20230307230205885

8. 对其方向

块轴

image-20230307232814886

行轴

image-20230307232918188

8.1 align-items和algin-self

演示地址

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: strentch;  
}
.item1 {
  grid-area: a;
    /*默认值*/
  algin-self: strentch;  
}
.item2 {
  grid-area: b;
  algin-self: start
}
.item3 {
  grid-area: c;
  align-self: end
}
.item4 {
  grid-area: d;
  align-self: center
}

image-20230307234130188

8.2 justify-items和justify-self

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>


.wrapper {
  display: grid;
  width: 400px;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 80px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  background-color: #ffa94d;
  margin: 0 auto;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}

div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

演示地址

image-20230308000350328

8.3 对齐网格到块轴

8.3.1 align-content

align-content - CSS：层叠样式表 | MDN (mozilla.org)

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>


.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  background-color: #ffa94d;
  //space-around表示边上的margin-top等于元素之间的margin-top的一半  
  align-content: space-around; /*space-between, center*/
  margin: 0 auto
}
.item1 {
  grid-area: a;
  align-self
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230308002910373

8.4 对齐网格到行轴

演示地址

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  background-color: #ffa94d;
  justify-content: space-around;/*end, center, start...*/
  margin: 0 auto
}
.item1 {
  grid-area: a;
  align-self
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230308003617268

8.5 自动对齐边距

margin: 0 auto这是之前的剧中， 在网格中对item元素使用margin-left: auto, 在分配内容之后剩余的距离都算为它的值。

9. 书写模式

也就是文字方向，中文一般是从左向右写，或者从上完下写，没有从右往左和从下到上，但是别的国家不一定是这种规则。

writing-mode - CSS：层叠样式表 | MDN (mozilla.org)

<div class="wrapper">
  <div class="item1">你好</div>
  <div class="item2">xjplt</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 10px;
  writing-mode: vertical-lr;
  margin: 0 auto
}
div {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

image-20230308004835324

10. 常见布局

利用 CSS 网格布局实现常用布局 - CSS：层叠样式表 | MDN (mozilla.org)

最强大的布局方案——网格Grid布局万字详解
郊眠寺
12-17 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。
css 布局之 display:grid
填了个大空℃
11-29 2705
一种新的自适应布局方式 display:grid
Grid 布局
最新发布
猫老板的豆
04-25 2586
Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。
Grid网格布局
weixin_44667463的博客
02-21 1643
布局简介 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局.
grid网格布局
baidu_41931024的博客
08-14 295
最近有空也看了一下grid布局 做下笔记 ----------------2019.8.14-------------- grid container网格容器 grid item网格项目 <div class='container'> //网格内容容器 <div class='item'></div> //网格项目 <div cl...
地表最强Grid布局
不见浅诗的博客
12-04 423
本篇文章参考文章 CSS Grid 网格布局教程 文章目录前言一、基本概念1.1 容器与项目1.2 行与列1.3 单元格与网格线 前言   之前写了篇关于 flex布局 的文章，收获了很多志同道合的小伙伴，发现布局问题各位都或多或少遇到过，为了今后我们不再因为布局问题苦恼，所以决定，今天一次性折磨个够，消除恐惧的最好办法就是面对他，奥里给！ 一、基本概念 1.1 容器与项目   网格布局和 flex 布局 一样，都引入了一个 容器-项目 的概念，采用网格布局的区域，称为"容器"（ cont
Grid布局综合Demo案例
05-27
网格布局（Grid布局）是CSS3中的一个强大工具，它为网页设计提供了二维的、基于网格的布局系统，使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
基于grid布局实现的响应式栅格系统
09-10
在本文中，我们将深入探讨如何利用CSS Grid布局来构建一个强大的响应式栅格系统，以及如何结合SCSS（Sassy CSS）进行更高效、可维护的编码。 1. CSS Grid布局基础： CSS Grid布局是CSS3中引入的一种二维布局系统，...
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
CSS Grid网格布局入门
没有翅膀的我们，只是随便认为不能飞而已
07-09 828
今日看了博客推送，关于css Grid布局，不规则布局，不是田字格，也不是九宫格。在此之前都是每个子div做定位的，简单粗暴。但今天看了这份，感触良多，不会地还很多，不仅仅css: (原博主图，实现类似于下图的布局) ，首先给容器设置grid网格属性，然后再看有几行几列。4行5列了，那可以先实现一个4行5列的网格，沿着这个思路实现如下： grid-container里面有12个div，代表12个...
grid之网格属性
cfyfcyf的博客
06-19 422
网格容器中的属性： display grid-template（网格模板）：控制网格行数、列数（grid-template-rows、grid-template-columns） gap：单元格之间的空隙 items：定义网格项之间的对齐 content:内容之间的对齐 grid-auto：自动生成的网格 这五个可以合并为：grid 1、display：grid | inline-gird | s...
详讲grid中 grid- column / row - start / end 线布局
m0_66939000的博客
02-03 1554
详讲grid中 grid- column / row - start / end 线布局， span在属性值里面的作用和两种简写形式
css布局grid-template-columns属性
m0_74265396的博客
11-06 1235
将创建一个有三列的网格，其中第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。” 将创建一个有6列的网格，其中每个重复的模式包含1个1fr列和1个2fr列。第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。总之， grid-template-columns 属性是用于定义网格列数量和大小的非常有用的属性，在创建具有复杂布局的网站时非常有用。您还可以将 grid-template-columns 属性设置为 auto，表示列的大小将根据内容自动调整。
CSS grid 的用法
Dust的博客
08-13 746
grid 的用法 加三个宽度为 200px 的列。 .container { display: grid; grid-template-columns: 200px 200px 200px; } 用 fr 这个单位来灵活地定义网格的行与列的大小。grid-template-columns: 2fr 1fr 1fr; > grid-template-columns: 300px 2fr 1fr，那么第一列宽度是 300px，剩下的两列会根据除去 300px 后的可用空间按比例分配。 g
Grid布局入门
imber___zsk的博客
12-27 467
参考：最强大的 CSS 布局 —— Grid 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
grid样式学习
m0_55766628的博客
01-02 471
用于处理列 常用使用方式。
css grid学习笔记
九段刀客的博客
09-23 2370
1、grid-template-areas实现放置指定区域 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 300px; height: 300px; display: grid;
如何使用grid布局
qq_46511756的博客
06-21 2455
以下都是写在父元素（grid容器上）添加了grid布局的容器默认是块元素。可以添加display:inline-grid; 改变成为行内块元素。改变格子排列方向grid-auto-flow：column；处理格子的流动方式（了解）grid-auto-flow：dense； //可以把多余空间占满控制内容在容器格子内的排列控制格子的排列，和flex一样，写在父元素上，水平居中、贴边等……，垂直居中、底部对其等……，控制单个元素 justify-self、align-self。组合简写：place-conte
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值