Grid 布局

简介

  1. 容器和项目

Grid 布局采用网格的布局方式,称为容器(container)。内部采用网格布局的元素称为项目(item)。

图片描述

 2. 行和列、单元格

图片描述
  1. 网格线

划分网格的线称为网格线(grid line)。可以看到从最左边开始,网格线从line 1开始计数。

图片描述

display 属性

根据之前所学,通过display属性可以设置为行内Grid和块级Grid,默认为块级元素。

.container {
  display: grid | inline-grid;
}

gird-template-rows 和 grid-template-columns

可以通过grid-template-rows来确定行的布局,通过grid-template-columns来确定列的布局。下面汇总我所知道的grid-template-rows/columns的写法:

  • 第一种,直接用大小布局(接下来省略.container {} )
 .container {
   grid-template-columns: 100px 150px 100px 120px;
   grid-template-rows: 33% 33% 33%;
 }

可以使用百分比

  • 第二种,使用repeat()
 grid-template-columns: repeat(4, 100px);
  • 第三种,使用fr来根据比例分配(2fr是1fr的两倍),可以和绝对长度搭配使用(px)。这样就是三列成1 : 2 : 3的比例。
 grid-template-columns: 1fr 2fr 3fr;
  • 第四种,使用auto-fill关键字如果告诉你容器的宽度为400px,每个单元格分配的大小是100pxs,对于列布局你可能就需要计算一下,400 / 50 = 8所以你分配4列。其实这个工作可以交给auto-fill关键字来自动完成,你只需要有容器的宽度或者高度,并告诉它需要分配的大小为多少,auto-fill就会在不溢出容器的情况下尽可能多得塞满容器。该代码大概就是在说🤔我的宽度为400px,每个元素占90px,然后你自己看着放吧,能放多少就是多少!
 .container {
   width: 400px;
   height: 350px;
   border: 1px solid blue;
   display: inline-grid;
   grid-template-columns: repeat(auto-fill, 90px);
   grid-template-rows: repeat(auto-fill, 100px);
 }
  • 第五种,min-max()限制第三列宽度在[300px, 1fr]之间。
 grid-template-columns: 1fr 1fr minmax(300px, 1fr);
  • 第六种,auto关键字全自动模式!
 grid-template-columns: 100px auto 100px;

gap 属性

gap属性可以网格中每一列之间的间距和每一行之间的间距。

有三种写法:

  • row-gap
  • column-gap
  • gap

其中gap是行和列的合并写法:

 grid-gap: <grid-row-gap> <grid-column-gap>;

也就是说这两种写法是等价的(这里只保留了核心代码,省略了很多,如display。):

 .container {
   gap: 10px 30px;
   /* 等价于下面的: */
   row-gap: 10px;
   column-gap: 30px;
 }

place-item 属性

通过,place-item可以设置单元格内容的水平和垂直位置,类似flex

同样的,place-itemalign-itemjustify-item的合并写法。

 place-items: <align-items> <justify-items>;

其中,align-item是垂直方向的调整,justify-items是水平方向上的调整,分开来使用方法如下:

 justify-items: start | end | center | stretch(默认值,拉伸);
 align-items: start | end | center | stretch;

合并也一样,这里省略🥱。

place-content 属性

place-item属性保持一致,place-contentjustify-contentalign-content的合并写法:

 place-content: <align-content> <justify-content>

这里能找到一个规律,和padding、margin属性类似,合并写法都是先上下方向↕️再左右↔️方向。

justify-content用于确定整个内容区域在容器里的水平位置,align-content用于确定整个内容区域在容器中的垂直位置,单独使用方法如下:

 justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
 align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

space-around | space-between | space-evenly三者都是均匀分布,区别在于项目两侧的间距:

  • space-around:项目(item)两侧的空白区域都一样,这样项目与项目之间的大小就比项目与容器边框的大小大一倍。
  • space-between:项目与项目之间的间隔相等,项目与容器边框没有间隔。
  • space-evenly:项目与项目的间隔相等,项目与边框的间隔也是同样的长度。

gird-template-area 属性

该属性可以为grip划分区域:

 .container {
   display: grid;
   grid-template-columns: 100px 150px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas:
     'a b c'
     'd d f'
     'g h .';
 }

d为多个区域合并,并且这里是两个区域合并。不使用的区域可以使用.来进行占位。

grid-auto-flow 属性

默认情况下网格的排列为先行后列(row),将其设置为(column)可以设置为先列后行:

 grid-auto-flow: row;

如果加上dense关键字,在使用了grid-column-start/end: xxx; grid-row-start/end: xxx; 之类的项目属性来控制跨行跨列时,会自动排列空白单元格,使用方法:

 grid-auto-flow: row dense;

— ——- —

grid-column 和 grid-row 属性

grid-column属性是grid-column-startgrid-column-end的合并写法,也就是常说的简写形式。同样的,grid-row属性是grid-row-startgrid-row-end的简写形式:

 .item {
   grid-column: <start-line> / <end-line>;
   grid-row: <start-line> / <end-line>;
 }

grid-column和grid-row是用来控制项目的位置的,我们叫做项目属性。

下面说说这两个属性的使用方法:

 .container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-auto-flow: row;
 }
 .item:nth-child(1) {
   grid-column-start: 1;
   grid-column-end: 3;
 }
 .item:nth-child(2) {
   grid-column-start: 1;
   grid-column-end: 3;
 }

这里的-start就是开始的网格线,-end是结束的网格线,在前面的简介中有介绍。并且网格线从1开始。除了写清楚两根开始和结束的网格线的写法,还有另一种写法:

 .item:nth-child(1) {
   grid-column-start: span 2;
 }

这种写法表示该单元格跨越两个网格。

简写的写法如下:

 .item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
 }

这里也是同样的原理,/左边是开始的网格线,右边是结束的网格线。同样可以使用span写法来通过开始网格线和跨越单元格数量来进行位置的控制。

 .item:nth-child(1) {
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
 }

place-self 属性

之前讲到place-items属性的功能是设置单元格内容的位置。但是有一个缺陷,那就是范围太大了,使用place-item会对所有项目也就是单元格实施同样的位置设置。为了解决这个问题,就有了place-self,该方法允许单元格在自己的css选择器中控制自己内容的位置,更加的灵活多变。

同样,他也有自己的简写形式:

 place-self: <align-self> <justify-self>;

水平和垂直各自使用方法如下:

 justify-self: start | end | center | stretch;
 align-self: start | end | center | stretch;

grid-area

之前介绍过grid-template-area,用于手动划分网格区域,该属性需要搭配grid-area来进行使用。因为之前的划分区域中不是有a b c···这种字母吗?这些字母相当于是一个区域的表示,我们需要在项目,也就是单元格中告诉单元格它属于哪个字母所表示的区域。

 .container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas:
     'a b c'
     'd e f'
     'g h i';
 }
 .item:nth-child(1) {
   grid-area: e;
 }

grid-area还可以用作grid-columngrid-row的简写形式:

 grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

总结

网格被分为了网格容器和项目,其中容器有容器的属性,项目有项目的属性。

容器属性有以下这些:

  • display 属性
  • grid-template-columnsgrid-template-rows 属性
  • row-gapcolumn-gapgap 属性
  • justify-itemsalign-itemsplace-items 属性
  • justify-contentalign-contentplace-content 属性
  • grid-template-areas 属性
  • grid-auto-flow 属性

项目属性有以下这些:

  • grid-column-startgrid-column-endgrid-row-startgrid-row-end 属性
  • grid-columngrid-row 属性
  • justify-selfalign-selfplace-self 属性
  • grid-area 属性
作者:Sy_

评论

  1. 博主
    Macintosh Chrome
    3 月前
    2024-11-30 22:44:35

    本文内容如果学会了,亲测可手撕web组国赛题中大多数布局相关的小题。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇