CSS Grid 布局基础

最新推荐文章于 2025-04-28 09:31:46 发布
转载 最新推荐文章于 2025-04-28 09:31:46 发布 · 58 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wcphahaha/p/9769745.html

grid 关键词解释

 

grid-template-columns: repeat(3, 1fr):

template:模板；

column：纵列；

repeat：重复；

(3, 1fr)：将页面分成3纵列、每一列宽度为1fr（fr是自适应长度单位）；

 

grid-gap: 10px：间隙大小10px；
 
 
grid-auto-rows: minmax(100px, auto);
auto：自动设置；
rows：每一行的长度；
minmax()：设置最小最大值；
 
grid-column： 设置元素列的区域范围；
grid-row：设置元素行的区域范围；
 
代码实例：
  
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
.wrapper div{
  background-color: rgb(251, 205, 145);
  border: 2px solid #666;
  opacity: .7;
  border-radius :5px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./class2.css">
    <title>Document</title>
</head>
<body>
<div class="wrapper">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
</div>
</body>
</html>

 

 
 

转载于:https://www.cnblogs.com/wcphahaha/p/9769745.html

【CSS】网格布局（简单布局、网格合并、网格嵌套）
HYY的博客
08-08 3721
CSS网格布局是一种强大的CSS布局系统，它简化了页面的布局和定位，同时适应不同屏幕大小的需求。通过使用grid-row和等属性，我们可以轻松地实现简单到复杂的网格布局。网格合并和嵌套使得在网格中创建复杂的布局变得更加简单和灵活。
CSS Grid 布局实战：从入门到精通
Ttbraver
11-15 1467
好的设计是解决问题的艺术。
display:grid 网格布局
热门推荐
woyebuzhidao321的博客
04-02 1万+
一、第一个示例了解网格布局 <!DOCTYPE html> <html> <head> <style> .item1 { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: 'myArea myArea myArea . . .'; grid-gap: 10px; background-color: #2196F3; padding: 1
纯CSS实现 - 瀑布流Grid栅格 ，抛砖引玉，欢迎思维发散
qq_32067561的博客
10-17 1619
朋友们，一起用 grid 做个瀑布流吧。
grid网格布局基本知识
weixin_46048542的博客
08-26 2424
我们使用display属性来定义一个网格容器，它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。 display: grid | inline-grid | subgrid grid：定义一个块级的网格容器 inline-grid：定义一个内联的网格容器 subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。 注意：column, float, clear和vertical-align对网格容器
使用 CSS 实现多列布局
前端开发
07-11 959
使用 CSS 实现多列布局
css grid布局属性详解
Jet_Lover的博客
09-12 1912
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。Flex 布局是轴线布局，可以看作是一维布局。Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
CSS网格布局Grid
2301_82023822的博客
03-24 3083
CSS Grid 是一种强大的二维布局系统，能够以行和列的方式精确控制网页布局。它比传统的布局方式（如浮动、定位）更灵活、更强大，适合构建复杂的响应式网页。当项目超出定义的网格范围时，浏览器会自动创建隐式网格。（行间距 20px，列间距 30px）。（最小 100px，最大 1fr）。是线性布局的终极解决方案，擅长处理。是二维布局的革命性工具，擅长构建。（重复 3 列，每列宽度相等）。：定义行和列之间的间距（替代。（行和列间距均为 10px）。（从第 1 列到第 3 列）。：所有项目的水平对齐方式（
CSS Grid 布局快速教程
jnfy的博客
09-13 975
CSS Grid 布局是 CSS 中最强大的布局系统（没有之一）。说起布局，另一个方便好用的Flex布局是避不开的，与 Flex 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。你可以把它想象成一个Table。本文不是一个大而全的教程，而是一个快速入门。
css网格布局Grid
qq_48795482的博客
04-28 843
强大的二维布局方案：网格布局，一文带你了解
CSS—— grid布局
mantou_riji的博客
05-14 8392
grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap 和 grid-row-gap。none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
5分钟教你学会 CSS Grid 布局
09-27
CSS Grid布局是一种用于网页设计的二维布局系统，它能够让你在网页上创建复杂的网格布局结构。随着主流浏览器如Safari、Chrome、Firefox和Edge的原生支持，CSS Grid已经成为前端开发者必须掌握的技能之一。它被认为...
优化算法基于四则运算的算术优化算法原理与Python实现：面向图像分割的全局寻优方法研究
最新发布
09-06
内容概要：本文系统介绍了算术优化算法（AOA）的基本原理、核心思想及Python实现方法，并通过图像分割的实际案例展示了其应用价值。AOA是一种基于种群的元启发式算法，其核心思想来源于四则运算，利用乘除运算进行全局勘探，加减运算进行局部开发，通过数学优化器加速函数（MOA）和数学优化概率（MOP）动态控制搜索过程，在全局探索与局部开发之间实现平衡。文章详细解析了算法的初始化、勘探与开发阶段的更新策略，并提供了完整的Python代码实现，结合Rastrigin函数进行测试验证。进一步地，以Flask框架搭建前后端分离系统，将AOA应用于图像分割任务，展示了其在实际工程中的可行性与高效性。最后，通过收敛速度、寻优精度等指标评估算法性能，并提出自适应参数调整、模型优化和并行计算等改进策略。; 适合人群：具备一定Python编程基础和优化算法基础知识的高校学生、科研人员及工程技术人员，尤其适合从事人工智能、图像处理、智能优化等领域的从业者；; 使用场景及目标：①理解元启发式算法的设计思想与实现机制；②掌握AOA在函数优化、图像分割等实际问题中的建模与求解方法；③学习如何将优化算法集成到Web系统中实现工程化应用；④为算法性能评估与改进提供实践参考； 阅读建议：建议读者结合代码逐行调试，深入理解算法流程中MOA与MOP的作用机制，尝试在不同测试函数上运行算法以观察性能差异，并可进一步扩展图像分割模块，引入更复杂的预处理或后处理技术以提升分割效果。
【微信小程序源码】图文信息；欢迎页面，音乐控制.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
bedrock-testing-support-7.0.4.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
【微信小程序源码】物业管理.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
grpc-services-1.68.1.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
CSS Grid布局详解与实例演示
特别关注了Flexbox和CSS Grid布局，这两种布局模式在现代网页设计中具有重要意义。此外，还介绍了Box Alignment以及CSS Grid System的计算公式，并通过CodePen代码实例展示了如何使用Grid计算单元格宽度。" CSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值