CSS——网格布局（display: grid）之下篇

news2024/11/18 3:42:14

CSS——网格布局（display: grid）之下篇

前面我们介绍了网格布局的基础的创建以及一些比较基础的属性，下面我们将介绍网格布局的剩余部分，还将结合实例来进行细致的讲解（图文并茂，生动形象有内涵）。

显式网格和隐式网格

显式网格：是指在CSS中明确定义的网格轨道。包括在 grid-template-rows和 grid-template-columns 属性中指定的行和列。显示网格的大小和位置是固定的，由开发者在CSS中明确指定。

隐式网格：指在显示网格之外自动创建的网格轨道。当网格项没有足够的显示网格轨道来容纳时，浏览器会自动创建额外的轨道来放置这些网格项。隐式网格的大小和位置是自动计算的，基于网格项的需求和网格容器的尺寸。

如果网格元素放在声明的网格轨道之外，就会创建隐式轨道，直到包含该元素
如果网格元素放在声明的网格轨道之外，就会创建隐式轨道，直到包含该元素（如上图所示），同时在指定网格线的时候，隐式网格轨道不会改变负数的含义。负的网格线编号仍然是从显式网格的右下开始的。
隐式网格轨道默认的大小为auto，也就是它们会扩展到能容纳自身的宽度（包含内容、内边距、边框和外边距）。下面介绍三个与之相关的属性。

grid-auto-flow 属性

首先来看取值吧：

grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

其中：

  • row
    多的格子一行一行陈列。默认值。
  • column
    多的格子一列一列排列。
  • dense
    多的格子空白填充。

row 与 column 之分

如果我们创建一个网格布局，可以看到，网格元素之间是默认占满一行，然后一个挨着一个地向下排列的。

 <style>
   .container {
     display: grid;
   }

   .item {
     background-color: #ccc;
   }
 </style>

<body>
  <main 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>
  </main>
</body>

在这里插入图片描述
如果此时我们为网格容器添加grid-template-columns: 1fr 1fr，使之分为两列，可以看到：这些盒子在填满本行之后，才去换行显示。那你可能会说了：“这不是理所当然的吗？”，嘿嘿，这可没有那么简单，这是因为grid-auto-flow属性默认设置为row，即默认先填充横向，再填充纵向。
在这里插入图片描述
如果我们修改grid-auto-flow: column，

 <style>
   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-auto-flow: column;
   }
   .item{
 	 background-color: #ccc;
   }
 </style>


<body>
  <main 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>


  </main>
</body>

那么会产生如下的效果：
在这里插入图片描述
原因是：我们设置了grid-auto-flow: column，故就先纵向填满，然而我们没有明确的划分出行数，所以就默认仅有初始元素所在的第一行，这就导致所有的子元素会横向排列成一行，后面的第3、4、5列没有划分大小，所以他们就fit-content，然后剩下的第1、2列平分剩下的空间（ fr单位的优先级是最低的，优先级顺序以及fit-content的解释可以看CSS——网格布局（display: grid）之上篇)。

dense 的作用

dense 翻译为稠密的，我们打个比方，如果有一片四四方方的农田，每家每户都各自分有一块，一开始大家都在种。如下图：
在这里插入图片描述
直到有一天，中间的一块田的主人王老二进城打工了，这片田就荒废了，远远望去，中间秃了一块。如下图：
在这里插入图片描述

村里人看到王老二进城打工赚大钱了，也就纷纷效仿，渐渐的，原本整整齐齐的一大块地，变得稀稀拉拉的。如下图：
在这里插入图片描述

这时候村长说了，“现在的地太分散了，为了方便管理，我们重新规划一下地块”。经过又一年的种植，如下图：
在这里插入图片描述

大家发现，村长让原本分散的地块变得稠密了，于是就给村长起了个外号“dense”。

我们再用代码演示：我们设置第一个元素在第二列的位置

 <style>
   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
   }

   .item{
 	 background-color: #ccc;
   }
   
   .item:nth-child(1) {
     grid-column: 2 / 3;
   }
 </style>
 
<body>
  <main 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>
  </main>
</body>

可以看到，左上角的位置空出来了（变得稀疏了）
在这里插入图片描述
这时，我们添加grid-auto-flow: dense（row是默认的），会看到：2号盒子填补了空缺的位置
在这里插入图片描述
如果我们设置了 grid-auto-flow: column dense，那么就会是以下的效果：
在这里插入图片描述
嗯，dense就是这样的，稍后实例中会用到。

P.S. 貌似有一个bug，如果在明确指定了某个子元素不在其默认位置时，浏览器渲染时会默认产生dense的效果。何为明确与不明确呢？比如刚才grid-column: 2 / 3仅指定了子元素的列的位置，没指定行的位置，那么这就算不明确指定；如果grid-column: 2 / 3 & grid-row: 1 /2或者 gird-area: A，这个元素的位置是确定的，那么这就算明确指定，在此时，浏览器渲染时会默认产生 dense 的效果。

grid-auto-columns & grid-auto-rows 属性

前面我们看到，在仅规定两列的情况下，隐式网格轨道的大小是 fit-content的，grid-auto-columns & grid-auto-rows 两个属性就是规定了隐式轨道的大小。
在这里插入图片描述

实战强化

注意：下面的部分会用到Flexbox（弹性盒子）布局部分的知识，该部分内容可以参考本人的另一篇文章CSS——弹性盒子布局（display: flex）

目标效果

下面我们要实现一个如下图的效果
在这里插入图片描述
我们可以看到图片有大有小，但是它们却能够网格对齐，仔细看还会发现，它们的顺序不是按照从左到右排序的，这个可以先联系一下 grid-auto-flow: dense。

步骤

创建网格布局
<style>
	body {
      background-color: rgb(254, 226, 181);
      font-family: Helvetica, Arial, sans-serif;
    }
    
    .portfolio {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 1em;
    }

    .portfolio>figure {
      margin: 0;
    }

    .portfolio img {
      max-width: 100%;
    }

    .portfolio figcaption {
      padding: 0.3em 0.8em;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: right;
    }

    .portfolio .featured {
      grid-row: span 2;
      grid-column: span 2;
    }
  </style>

<body>
  <div class="portfolio">
    <figure class="featured">
      <img src="./images/pic1.jpg" alt="">
      <figcaption>1</figcaption>
    </figure>
    <figure>
      <img src="./images/pic2.jpg" alt="" />
      <figcaption>2</figcaption>
    </figure>
    <figure>
      <img src="./images/pic3.jpg" alt="" />
      <figcaption>3</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic4.jpg" alt="" />
      <figcaption>4</figcaption>
    </figure>
    <figure>
      <img src="./images/pic5.jpg" alt="" />
      <figcaption>5</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic6.jpg" alt="" />
      <figcaption>6</figcaption>
    </figure>
    <figure>
      <img src="./images/pic7.jpg" alt="" />
      <figcaption>7</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic8.jpg" alt="" />
      <figcaption>8</figcaption>
    </figure>
  </div>
</body>

我们创建以上的网格布局是这样的：
在这里插入图片描述
其中，我们通过grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))创建了自适应布局，会根据视口的大小自动分配列数，但是每列的最小宽度不会低于200px。

这时候我们发现，容器内部比较稀疏，所以我们想到了grid-auto-flow: dense，为网格容器添加了以上属性之后的效果如下：
在这里插入图片描述
我们会发现2、3号是对齐的，但是5、7号以及6、8号是没有对齐的，这是因为在默认情况下，网格元素会扩展到网格单元的大小，但是其子元素不会自动扩展，在这里，网格元素是 <figure>元素，它会自动扩展，但是它的子元素<img> 与 <figcaption>不会扩展，网格肯定是对齐的，但是由于以上原因，导致网格单元内部出现了空余部分，如下图：
在这里插入图片描述

使网格单元内部所有元素拉伸

这时候我们想到了前面的 Flexbox（弹性盒子）布局，它能够实现其直接子元素自动扩展（与网格布局类似）。所以我们添加以下代码：

.portfolio>figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

我们首先将<figure>设置成弹性盒子，让其主轴方向为竖直，那么其子元素就可以实现在竖直方向上的扩展。效果如下：
在这里插入图片描述
我们发现，这里除了<figcaption> 与 <img> 元素之间的间距没了，其余的还是没有变化，嘿嘿，这是为什么呢？
当然是我们忘记给子元素设置flex属性了，可以看到，flex-grow默认值是 0即默认不会放大。
在这里插入图片描述
所以我们为子元素设置该属性（建议使用简写，原因见本人的 flex文章，链接在本节开始部分）：flex: 1，我们不希望<figcaption>也随之放大，所以我们只为<img>添加该属性。

figure>img{
	flex: 1;
}

效果如下：
在这里插入图片描述
以上看起来以上效果很好了（嗯，我也觉得），前面消失的<img>元素与<figcaption>之间间距我就不追加了，不过有时候要考虑<img>图片的缩放问题。

一个被拉伸的<img>元素的小细节

在前面我们将<img>元素拉伸以填充满父元素，但是这样这会改变图片的宽高比，导致图片变形。好在 CSS 为控制这一行为提供了一个特殊属性 object-fit。默认情况下，一个<img>的 object-fit 属性值为 fill，也就是说整个图片会缩放，以填满<img>元素。我们也可以设置其他值改变默认行为。
比如，object-fit 属性的值还可以是 cover 和 contain。这些值告诉浏览器，在渲染盒子里改变图片的大小，但是不要让图片变形。

  • cover：扩展图片，让它填满盒子（导致图片一部分被裁剪）。
  • contain：缩放图片，让它完整地填充盒子（导致盒子里出现空白）。
    在这里插入图片描述

这里，我为了保持画面的整体性，默认采用了 object-fit: fill。可以根据需求和具体情况，选择适合的值。

这里有两个概念要区分清楚：盒子（由<img>元素的宽和高决定）和渲染的图片。默认情况下，这二者大小相等。object-fit 属性让我们能在盒子内部控制渲染图片的大小，同时保持盒子的大小不变。

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局的实战</title>
  <style>
    body {
      background-color: rgb(254, 226, 181);
      font-family: Helvetica, Arial, sans-serif;
    }

    .portfolio {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-auto-flow: row dense;
      grid-gap: 1em;
    }


    .portfolio>figure {
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    figure>img {
      flex: 1;
      object-fit: fill;
    }

    .portfolio img {
      max-width: 100%;
    }

    .portfolio figcaption {
      padding: 0.3em 0.8em;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: right;
    }

    .portfolio .featured {
      grid-row: span 2;
      grid-column: span 2;
    }
  </style>
</head>

<body>
  <div class="portfolio">
    <figure class="featured">
      <img src="./images/pic1.jpg" alt="">
      <figcaption>1</figcaption>
    </figure>
    <figure>
      <img src="./images/pic2.jpg" alt="" />
      <figcaption>2</figcaption>
    </figure>
    <figure>
      <img src="./images/pic3.jpg" alt="" />
      <figcaption>3</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic4.jpg" alt="" />
      <figcaption>4</figcaption>
    </figure>
    <figure>
      <img src="./images/pic5.jpg" alt="" />
      <figcaption>5</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic6.jpg" alt="" />
      <figcaption>6</figcaption>
    </figure>
    <figure>
      <img src="./images/pic7.jpg" alt="" />
      <figcaption>7</figcaption>
    </figure>
    <figure class="featured">
      <img src="./images/pic8.jpg" alt="" />
      <figcaption>8</figcaption>
    </figure>
  </div>
</body>

</html>

结尾

创作不易，感谢喜欢和支持，如有错误，恳请指出，希望与大家共同进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2162457.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用现有的科技或许无法实现对人类智能的模拟

使用现有的科技或许无法实现对人类智能的模拟

现有科技在实现真正的人类智能方面面临许多挑战。科技的局限性涉及许多领域&#xff0c;在计算能力方面&#xff0c;尽管处理速度不断提升&#xff0c;但要模拟人脑的复杂性仍然困难重重&#xff1b;当前的人工智能依赖于大量数据进行训练&#xff0c;缺乏灵活性和适应性&#…
阅读更多...
时间序列数据可视化

时间序列数据可视化

#时间序列可视化 #离散数据的时间序列可视化 import numpy as np import pandas as pdts pd.Series(np.random.randn(1000), indexpd.date_range(1/1/2000, periods1000)) ts ts.cumsum() ts.plot() #%% #连续数据的时间序列可视化 import matplotlib.pyplot as plt df pd.D…
阅读更多...
打印规律图形

打印规律图形

思路&#xff1a;将主对角线的1,2,3,4看成一行&#xff0c;5,6,7看成一行&#xff0c;8,9看成一行&#xff0c;10看成一行。按照这种方法&#xff0c;遍历一遍&#xff0c;正好是1~10。 然后在遍历的过程中将这些数存放在数组中。 上图所示&#xff1a;1的坐标为&#xff08;1…
阅读更多...
PCL 八叉树的使用

PCL 八叉树的使用

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1构建八叉树 2.1.2可视化函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09;…
阅读更多...
计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-20

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-20

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-20 1. Multimodal Fusion with LLMs for Engagement Prediction in Natural Conversation Authors: Cheng Charles Ma, Kevin Hyekang Joo, Alexandria K. Vail, Sunreeta Bhattacharya, Alvaro Fern’andez Ga…
阅读更多...
Linux驱动开发初识

Linux驱动开发初识

Linux驱动开发初识 文章目录 Linux驱动开发初识一、驱动的概念1.1 什么是驱动&#xff1a;1.2 驱动的分类&#xff1a; 二、设备的概念2.1 主设备号&次设备号&#xff1a;2.2 设备号的作用&#xff1a; 三、设备驱动整体调用过程3.1 上层用户操控设备的流程&#xff1a;3.2…
阅读更多...
conda 虚拟环境安装GDAL

conda 虚拟环境安装GDAL

一. 背景 换了新电脑&#xff0c;要重新安装GDAL。从前是下了GDAL的.wheel文件用pip安装&#xff0c;但平时下轮子的网站现在都打不开&#xff0c;比如https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal&#xff0c;不晓得为什么。 后面看了这篇教程解决了问题&#xff08;h…
阅读更多...
一文说透RTMP、RTSP、RTP、HLS、MPEG-DASH

一文说透RTMP、RTSP、RTP、HLS、MPEG-DASH

实时视频传输协议 1. RTMP&#xff08;Real Time Messaging Protocol&#xff09; 简介&#xff1a;RTMP是由Adobe公司开发的实时消息传输协议&#xff0c;主要用于流媒体数据的传输。它基于TCP传输&#xff0c;具有低延迟、高可靠性的特点。特点&#xff1a;RTMP支持多种视频…
阅读更多...
gtk安装和测试

gtk安装和测试

linux的图形库有qt和gtk, qt功能强大&#xff0c;但是商用要付费。 gtk是个免费开源的&#xff0c;也不错。现在linux的类似windows办公环境基本是gtk编写的吧&#xff08;我猜&#xff09;。linux下的wps好像是用qt写的。 闲言少序&#xff0c;开始gtk. 先安装&#xff1a; …
阅读更多...
北京未来感知科技一文概括（全）：UWB定位技术

北京未来感知科技一文概括（全）：UWB定位技术

一、UWB定位技术带给人类社会的进步性#uwb定位# UWB&#xff08;超宽带&#xff09;定位技术作为一项前沿的无线通信技术&#xff0c;以其高精度、实时性、安全性和广泛的应用前景为人类社会的进步带来了显著的影响。随着技术的不断发展和创新应用的不断涌现&#xff0c;UWB定位…
阅读更多...
双向链表的基本结构及功能实现

双向链表的基本结构及功能实现

1.基本结构: 双向链表是一种链表数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含三个部分&#xff1a; (1).数据域&#xff1a;存储节点的数据 (2).前驱指针:指向前一个节点 (3).后驱指针:指向下一个节点 2.基本特性&#xff1a; 双向链接: 与单向链表…
阅读更多...
全球化文创科技产业集团「得力集团」携手企企通，采购数字化项目一阶段上线！

全球化文创科技产业集团「得力集团」携手企企通，采购数字化项目一阶段上线！

近日&#xff0c;国内最大的办公与学习用品产业集团、多工作场景整体解决方案的领导者「得力集团有限公司」&#xff08;以下简称“得力集团”&#xff09;携手企企通打造的SRM项目一阶段成功上线。 基于该平台&#xff0c;得力集团在供应链采购业务方面实现全流程、全品类、全…
阅读更多...
ELK-03-skywalking监控linux系统

ELK-03-skywalking监控linux系统

文章目录 前言一、下载node_exporter二、启动node_exporter三、下载OpenTelemetry Collector四、启动OpenTelemetry Collector4.1 将配置文件下载到同级目录4.2 启动 五、查看总结 前言 skywalking安装完成后&#xff0c;开始我们的第一个监控-监控linux系统。 参考官方文档&a…
阅读更多...
构造者模式多种实现方式

构造者模式多种实现方式

构造者模式 ​ 构造者模式建议将对象构造代码从产品类中抽取出来&#xff0c; 并将其放在一个名为构造者的独立对象中 ​ 构建者模式也是用来创建对象&#xff0c;但是相对于工厂模式来说&#xff0c;建造者模式适用于构建复杂对象&#xff0c;而工厂模式适用于创建对象的封装…
阅读更多...
前端框架的对比和选择

前端框架的对比和选择

在当今的前端开发领域&#xff0c;有多种流行的前端框架可供选择&#xff0c;如 Vue、React 和 Angular。以下是这些框架的对比以及 Vue 的优势&#xff1a; 一、React 特点&#xff1a; 声明式编程&#xff1a;使用 JSX 语法&#xff0c;使得组件的结构和行为更加清晰。虚拟…
阅读更多...
力扣P1706全排列问题 很好的引入暴力 递归 回溯 dfs

力扣P1706全排列问题 很好的引入暴力 递归 回溯 dfs

代码思路是受一个洛谷题解里面大佬的启发。应该算是一个dfs和回溯的入门题目&#xff0c;很好的入门题目了下面我会先给我原题解思路我想可以很快了解这个思路。下面是我自己根据力扣大佬写的。 我会进行详细讲解并配上图辅助理解大家请往下看 #include<iostream> #inc…
阅读更多...
CentOS 安装 JAVA环境（JDK 1.8）

CentOS 安装 JAVA环境（JDK 1.8）

镜像选择 推荐国内镜像直接下载 清华镜像 https://mirrors.tuna.tsinghua.edu.cn/Adoptium 关于重命名 AdoptOpenJDK 镜像为 Adoptium 的通知 编程宝库 http://www.codebaoku.com/jdk/jdk-index.html 这个镜像站&#xff0c;包含Oracle JDK、OpenJDK、AdoptOpenJDK、阿里…
阅读更多...
Lesson1 机器学习_基础介绍（环境配置、入门知识）

Lesson1 机器学习_基础介绍（环境配置、入门知识）

Anaconda说明 学习Python的时候&#xff0c;使用者需要耗费时间下载对应的库&#xff08;理解为Python的武器&#xff09;......一家数据公司想让Python的使用更加便利&#xff0c;于是anaconda诞生了anaconda相当于一辆运输车&#xff0c;不仅包含了Python&#xff0c;还附有P…
阅读更多...
【Python】数据可视化之点线图

【Python】数据可视化之点线图

目录 散点图 气泡图 时序图 关系图 散点图 Scatterplot&#xff08;散点图&#xff09;是一种用于展示两个变量之间关系的图表类型。在散点图中&#xff0c;每个观测值&#xff08;或数据点&#xff09;都被表示为一个点&#xff0c;其中横轴&#xff08;X轴&#xff09;代…
阅读更多...
MODELS 2024震撼续章：科技与可持续性的未来交响曲

MODELS 2024震撼续章：科技与可持续性的未来交响曲

MODELS 2024国际会议正如火如荼地进行着&#xff0c;每一天都充满了新的发现与启迪&#xff0c;每一场分享都是对技术前沿的一次深刻探索&#xff0c;更是对现实世界可持续性挑战的一次积极回应。现在让我们继续这场科技盛宴&#xff0c;看看小编为您精选几场的学术分享吧~ 会议…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023