【css基础篇】grid布局(二)

前言:✍️ 欢迎来到 grid布局 篇, 本节我将为大家继续介绍grid布局的相关知识,上周留的坑填一下哈~

这周刚好返校,但是文章还是继续周更哈,记录自己学习的过程

一、 CSS Grid 网格属性

Grid Container

  • display: 这个属性用于将一个元素标记为网格容器,并为其内容创建一个独立的网格布局环境。简单来说,它会让元素内部的子元素按照网格布局进行排列。

    • grid: 生成一个块级网格
    • inline-grid: 生成一个行级网格
    css 复制代码
    .container {
      display: grid | inline-grid;
    }
  • grid-template-columns & grid-template-rows: 使用空格分隔的值列表来定义网格的列和行,定义的这些值就是行和列的 size,之间的空格就是网格线

    • <track-size>: 可以是长度、百分比或使用 fr 单位表示网格中的剩余空间的分数
    • <line-name>: 您选择的任意名称
    • 详细
    css 复制代码
    .container {
      grid-template-columns: ... ...;
      /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
      grid-template-rows: ... ...;
      /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
    }

    网格线会自动分配正数(-1 作为最后一行的替代)

    ok,talk is cheap,see the code.

    Example

    css 复制代码
    .grid-container {
      display: grid;
      grid-template-rows: 100px 200px; /* 定义两行,高度分别为 100px 和 200px */
      grid-template-columns: 1fr 2fr; /* 定义两列,宽度比例为 1:2 */
      grid-gap: 10px; /* 设置网格项之间的间距为 10px */
    }
    
    .grid-item {
      background-color: #ddd;
      padding: 20px;
    }
    html 复制代码
    <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
    </div>
  • grid-template-areas: 简单来说,你可以通过给网格区域起名字,并在网格模板中引用这些名字来定义网格的结构,从而更清晰地了解网格布局的组织方式。

    • <grid-area-name>: 使用 grid-area 指定的网格区域的名称
    • .: 句点表示一个空的网格单元格
    • none: 没有定义的网格区域
    css 复制代码
    .container {
      grid-template-areas:
        '<grid-area-name> | . | none | ...'
        '...';
    }

    Example

    css 复制代码
    .grid-container {
      display: grid;
      grid-template-areas:
        'header header'
        'sidebar main';
      grid-gap: 10px;
    }
    
    .header {
      grid-area: header;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #d9d9d9;
      padding: 20px;
    }
    
    .main {
      grid-area: main;
      background-color: #e6e6e6;
      padding: 20px;
    }
    html 复制代码
    <div class="grid-container">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main Content</div>
    </div>
  • grid-template: grid-template-rows、grid-template-columns 和 grid-template-areas 的简写方式。

  • column-gap & row-gap & grid-column-gap & grid-row-gap & grid-gap: 这个比较简单我就一笔带过,设置列,行间距,grid-gap是两者的简写方式

    css 复制代码
    .container {
      /* standard */
      column-gap: <line-size>;
      row-gap: <line-size>;
    
      /* old */
      grid-column-gap: <line-size>;
      grid-row-gap: <line-size>;
    }
    
    .container {
      /* standard */
      gap: <grid-row-gap> <grid-column-gap>;
    
      /* old */
      grid-gap: <grid-row-gap> <grid-column-gap>;
    }
  • justify-items & align-items: 将网格项沿着行内(水平)轴对齐(与 align-items 相反,它是沿着块级(垂直)轴对齐)。此值适用于容器内的所有网格项。

    • start
    • end
    • center
    • stretch
    • baseline (align-items)
    css 复制代码
    .container {
      justify-items: start | end | center | stretch;
    }

    Example

    css 复制代码
    .container {
      justify-items: start;
    }
  • place-items: place-items 属性在单个声明中同时设置了 align-itemsjustify-items 属性,也就是它两的缩写

  • justify-content & align-content: 这个也是跟 flex 布局中的相类似的,不过该属性针对的是整个 grid container

    • start
    • end
    • center
    • stretch
    • space-around
    • space-between
    • space-evenly
    css 复制代码
    .container {
      justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    }

    Example

    css 复制代码
    .container {
      justify-content: start;
    }
  • place-content: justify-content & align-content的缩写

  • grid-auto-columns & grid-auto-rows: 指定了隐式创建的网格横向、纵向轨道的宽度

  • grid-auto-flow: 如果您有一些网格项没有明确放置在网格上,自动布局算法会自动对这些项进行布局。这个属性控制自动布局算法的工作方式

    • row
    • column
    • dense

    Example

    css 复制代码
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-auto-flow: row;
      grid-gap: 10px;
    }
    
    .grid-item {
      background-color: #f2f2f2;
      padding: 10px;
    }
    html 复制代码
    <div class="grid-container">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
      <div class="grid-item">Item 3</div>
      <div class="grid-item">Item 4</div>
      <div class="grid-item">Item 5</div>
    </div>
  • grid: 是一个 CSS 简写属性,可以用来设置以下属性: 显式网格属性 grid-template-rowsgrid-template-columnsgrid-template-areas, 隐式网格属性 grid-auto-rowsgrid-auto-columnsgrid-auto-flow, 间距属性 grid-column-gapgrid-row-gap

Grid Items

  • grid-column-start & grid-column-end & grid-row-start & grid-row-end: 通过引用特定的网格线确定网格项在网格中的位置。grid-column-start/grid-row-start 是网格项开始的线,而 grid-column-end/grid-row-end 是网格项结束的线。

    • <line>: 可以是一个数字,用于引用编号的网格线,也可以是一个名称,用于引用命名的网格线
    • span <number>: 该项将跨越所提供的网格轨道数量
    • span <name>: 该项将跨越直到遇到下一个具有所提供名称的线
    • auto: 表示自动布局、自动跨度或默认跨度为一
    css 复制代码
    .item {
      grid-column-start: <number> | <name> | span <number> | span <name> | auto;
      grid-column-end: <number> | <name> | span <number> | span <name> | auto;
      grid-row-start: <number> | <name> | span <number> | span <name> | auto;
      grid-row-end: <number> | <name> | span <number> | span <name> | auto;
    }

    Example

    css 复制代码
    .item-a {
      grid-column-start: 2;
      grid-column-end: five;
      grid-row-start: row1-start;
      grid-row-end: 3;
    }
  • grid-column & grid-row: 分别是 grid-column-start + grid-column-endgrid-row-start + grid-row-end 的简写形式

    • <start-line> / <end-line>
    css 复制代码
    .item {
      grid-column: <start-line> / <end-line> | <start-line> / span <value>;
      grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    }

    Example

    css 复制代码
    .item-c {
      grid-column: 3 / span 2;
      grid-row: third-line / 4;
    }
  • grid-area: 为项目指定一个名称,以便可以通过使用 grid-template-areas 属性创建的模板引用它。或者,该属性可以作为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写形式(上面有 demo 可以去翻一下)

  • justify-self: 也是比较简单好懂的一笔带过,相当与在网格内进行横向的排列

    • start
    • end
    • center
    • stretch
  • align-self: 同样的,相当与在网格内进行纵向的排列

    • start
    • end
    • center
    • stretch

    Example

  • place-self: justify-self & align-self二者的缩写

二、特殊单位和函数

fr units

在 CSS Grid 中,你很可能会经常使用很多分数单位,比如 1fr。它们本质上表示"剩余空间的一部分"。因此,像下面这样的声明:

css 复制代码
grid-template-columns: 1fr 1fr 1fr;

意思是将可用空间平均分为三份,每份占据剩余空间的 1/3。这样,每个列的宽度将相等,并且会自动适应其容器的大小。

Sizing Keywords

在调整行和列的大小时,你可以使用你熟悉的所有长度单位,比如像素(px)、rem、百分比(%)等,但你还可以使用一些关键字:

  • min-content: min-content 表示内容的最小尺寸
  • max-content: max-content 表示内容的最大尺寸
  • auto: 它会根据内容的大小自动调整。这意味着网格项的尺寸将根据其内容的大小来确定,并且不会直接参与剩余空间的分配
  • Fractional units: like fr

Sizing Functions

  • fit-content(): 这个函数使用可用的空间,但永远不会小于最小内容(min-content),也永远不会大于最大内容(max-content
  • minmax(): 它为长度设置了最小值和最大值。这在与相对单位结合使用时非常有用
css 复制代码
grid-template-columns: minmax(100px, 1fr) 3fr; // 意味着定义一个最小值100px 最大值1fr

the repeat function and keywords

Example

css 复制代码
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

/* easier: */
grid-template-columns: repeat(8, 1fr);
  • auto-fit: 尽可能多地在一行上放置列,即使它们是空的
  • auto-fill: 将所有列适应到可用空间中。优先扩展列以填充空间,而不是留下空的列

三、总结

码字不易,请大家给点支持哦,哈哈,明天就周一了,祝大家一切顺利 ^_^

四、参考

相关推荐
fruge4 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia12 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫13 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年32 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_33 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891135 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾37 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu39 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym44 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫1 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js