ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS Grid 布局全攻略：从基础到进阶 [打印本页]
作者: 怀念夏天    时间: 2025-1-10 03:09
标题: CSS Grid 布局全攻略：从基础到进阶
一.Grid 是什么

CSS 中 Grid 是一种强盛的布局方式，它可以同时处理行和列
Grid 和Flex有一些类似，都是由父元素包裹子元素利用
二.示例代码

都是基于这个html代码
  1. import less from './index.module.less'
  3. //grid 布局
  4. const Grid = () => {
  5.   return (
  6.     <div className={less.box}>
  7.       <div>1</div>
  8.       <div>2</div>
  9.       <div>3</div>
  10.       <div>4</div>
  11.       <div>5</div>
  12.     </div>
  14.   )
  15. }
  17. export default Grid
复制代码
1. 基础利用 - 固定宽高

  1. .box {
  2.   margin: 50px auto;
  3.   display: grid;
  4.   grid-template-rows: 100px 50px; //每行的高度
  5.   grid-template-columns: 100px 50px 50px; // 每列的宽度
  6.   width: 300px;
  7.   height: 300px;
  8.   border: 1px solid red;
  9. }
  11. .box div {
  12.   border: 1px solid green;
  13.   text-align: center;
  14. }
复制代码

2.百分百宽高

  1. .box {
  2.   margin: 50px auto;
  3.   display: grid;
  4.   grid-template-rows: 50% 50%; //每行的高度
  5.   grid-template-columns: 33% 33% 33%; // 每列的宽度
  6.   width: 300px;
  7.   height: 300px;
  8.   border: 1px solid red;
  9. }
  11. .box div {
  12.   border: 1px solid green;
  13.   text-align: center;
  14. }
复制代码

3.重复设置-repeat

repeat ：统一设置值，第一个参数为重复数量，第二个参数是重复值
  1. .box {
  2.   margin: 50px auto;
  3.   display: grid;
  4.   grid-template-rows: repeat(2,30%);
  5.   grid-template-columns: repeat(2,50%);
  6.   width: 300px;
  7.   height: 300px;
  8.   border: 1px solid red;
  9. }
  11. .box div {
  12.   border: 1px solid green;
  13.   text-align: center;
  14. }
复制代码
此中的第五个div没有设置高度，所以自顺应

4.单位-fr

grid 中的 fr单位和 flex布局中的 grow属性类似
  1. .box {
  2.   margin: 50px auto;
  3.   display: grid;
  4.   grid-template-rows: 1fr 2fr;
  5.   grid-template-columns: 150px 1fr 2fr;
  6.   width: 300px;
  7.   height: 300px;
  8.   border: 1px solid red;
  9. }
  11. .box div {
  12.   border: 1px solid green;
  13.   text-align: center;
  14. }
复制代码

5.自顺应

在网格布局可以利用auto属性设置用来获取剩余所有空间
  1. .box {
  2.   margin: 50px auto;
  3.   /* width: 300px; */
  4.   height: 200px;
  5.   display: grid;
  6.   grid-template-columns: 10vw auto 20vw;
  7.   border: 1px solid #3333;
  8. }
  10. .box div {
  11.   padding: 20px;
  12.   background-clip: content-box;
  13.   border: 1px solid green;
  14.   text-align: center;
  15.   line-height: 160px;
  16. }
复制代码

6.间距定义

利用gap来来定义间距
row-gap:30px:定义行间距
column-gap:10px:定义列间距
  1. .box {
  2.   margin: 50px auto;
  3.   /* width: 300px; */
  4.   height: 200px;
  5.   display: grid;
  6.   grid-template-columns: 10vw auto 20vw;
  7.   border: 1px solid #3333;
  8.   gap: 20px 10px;
  9. }
  11. .box div {
  12.   padding: 20px;
  13.   background-clip: content-box;
  14.   border: 1px solid green;
  15.   text-align: center;
  16.   line-height: 160px;
  17. }
复制代码

其他

关于grid 布局剩余后续在继续更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4