复习随记——关于Grid

最新推荐文章于 2022-05-29 15:06:52 发布
最新推荐文章于 2022-05-29 15:06:52 发布
阅读量218 收藏
点赞数
分类专栏： 复习随记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43516152/article/details/97168941
版权

关于Grid布局的一些理解
——其实个人认为CSS这一块最起码先把对应的“公式”先记熟

简介

Grid布局又叫做网格布局，顾名思义是一种二维网格的布局方式（Flex可以理解为一维布局），Grid的强大让人兴奋！

兼容性
提到Grid布局可能很多人会联想到它的兼容性问题，但是截止至2017年3月，已经有许多浏览器对Grid提供了支持，而且无需加浏览器前缀。

在这里插入图片描述

上面的浏览器，顺序从左到右：

PC 端： Chrome、Edge、Firefox、IE、Opera、Safari

移动端： Android、Chrome for Android、Edge Mobile、Firefox for Android、Opera、IOS Safari、Samsung Internet

基本概念

Contaniner： 网格容器，当我们设置 display:grid 就将一个容器变成了网格容器。

Item：网格项，在我们设置的网格容器中的每一个子元素都是网格项

Line：网格线，就是网格之间的分界线

Track：网格轨道，两条相邻的网格线之间的空间，也就是网格的行或者列

Cell

最低0.47元/天 解锁文章
Harhr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[译] CSS Grid 之列宽自适应：`auto-fill` vs `auto-fit`
weixin_33858336的博客
02-20 2377
原文地址：Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit 原文作者：SARA SOUEIDAN 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：pot-code 校对者：ParadeTo、realYukiko CSS Grid 之列宽自适应：auto-fill vs auto-fit ...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 509
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
用好这 20 个 CSS 技巧快速提升你的技能
qq_34703156的博客
01-20 185
目录 flexbox 内容换行 间距 长文本内容 防止图像被拉伸或压缩 锁定滚动链接 CSS 变量回退 使用固定宽度或高度 被忽略的 background-repeat 垂直方向的媒体查询 使用 justify-content: space-between 图片上的文字 使用 CSS 网格中的固定值需注意 仅在需要时显示滚动条 滚动条装订线 CSS flexbox
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
css flex与grid布局比较
张小年的博客
04-12 7539
（前面是大概简介，后面为具体实例）可参考此文章 一、flex布局简介 flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。 使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 二、grid布局简介 Gird Layout(css网格布局)是cs...
阿西河前端教程学习心得随记——HTML5 有哪些新特性？_声明方式
01-08
好吧，那就从内容系统且全面的阿西河前端教程——HTML的面试题开始吧。 为了享受这个过程，我会首先滑动鼠标中键，大概浏览下Up主博客的篇幅及其一级标题和二级标题（篇幅当然是越短越喜欢啦，嘻嘻~），而Up主提到的...
AJAX 随记
10-29
在本篇随记中，我们将探讨如何结构化地创建和使用一个基础的AJAX实现。 首先，我们需要创建一个AJAX对象。在不同的浏览器环境下，XMLHttpRequest对象的创建方式有所不同。在现代浏览器中，我们可以通过`new ...
c++随记.docx
09-11
学习c++过程中的一些知识点随记，我感觉重要的就稍微记了一下，比较简略，但是快速的阅读的话可以提醒自己想起那一部分的知识点。在复习c++知识点的时候，有些帮助。
随记统一响应结果和全局异常类
01-30
个人练习使用idea编写的项目后，总结的东西
python、selenium版本查看 xpath元素抓取随记（csdn）————程序.pdf
12-03
在Python自动化测试领域，Selenium是一个非常强大的工具，它允许我们模拟用户操作，与网页进行交互。这篇笔记主要涵盖了如何查看Python和Selenium的版本，以及XPath元素抓取的高级用法，这对于进行Web自动化测试至关...
Grid 布局 - 网格布局
JHY97的博客
01-17 1775
目录 一、什么是Grid布局 二、容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1.2grid-template-rows 2.2 row-grap和column-grap 2.2.1row-grap 2.2.2 column-grap 2.3grid-template-area 2.4 grid-auto-flow 2.5 justify-items（水平方向...
网格布局（Grid）
m0_59101538的博客
05-29 2041
概述 1、网格布局（Grid）是最强大的 CSS 布局方案。 2、它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 3、Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 4、Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。.
grid宽度自适应中auto-fit和auto-fill的区别
MFWSCQ的博客
04-01 1万+
除了显式的指定列大小之外，CSS Grid 还有个非常强大的功能 —— 模式填充（repeat-to-fill）列然后对内容进行自动布局。也就是说，开发者只需要指定列数，自适应方面的事情（视口尺寸小则显示列数少，反之则多）交给浏览器来处理就行了，也不需要用媒体查询。比如我们可以用grid-template-columns:repeat(6,1fr)来指定该容器中包含6列，每列宽度轨道...
grid布局中的repeat:auto-fill与auto-fit
zgrbsbf的专栏
09-12 6780
grid布局中有个repeat,  比如 grid-template-columns: repeat(2, 50px 1fr) 100px; 第一个参数是指定重复的次数，上面的例子就是指定了两次，但是有的时候我们希望自动填充次数，充满外面的容器，可以用auto-fill或者auto-fit。 下面是例子 .one{             background-color: bl
网格布局溢出页面问题，grid-gap溢出页面问题
song_within_cloud的博客
06-17 3477
grid-row-gap使用百分比单位会导致内容溢出容器，使用其他单位则不会出现此问题。
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
随记洗牌发牌的C语言程序
06-06
以下是一个简单的随机洗牌发牌程序的C语言代码： ```c #include #include #include #define DECK_SIZE 52 #define SUIT_SIZE 13 int main() { int deck[DECK_SIZE]; int i, j, temp; // 初始化牌堆 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值