前端 CSS 经典:grid 栅格布局(下)

简介: 前端 CSS 经典:grid 栅格布局(下)

前端 CSS 经典:grid 栅格布局(上)https://developer.aliyun.com/article/1513269?spm=a2c6h.13148508.setting.19.f8774f0euyBLtl

10. justify-items

单元格内容水平位置设置:stretch、start、end、center

10.1 stretch

默认单元格内容水平填充单元格

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: stretch;
  span {
    border: 1px solid;
  }
}

10.2 start

单元格内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: start;
  span {
    border: 1px solid;
  }
}

10.3 end

单元格内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: end;
  span {
    border: 1px solid;
  }
}

10.4 center

单元格内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: center;
  span {
    border: 1px solid;
  }
}

11. align-items

单元格内容垂直位置:stretch、start、end、center

11.1 stretch

单元格内容垂直填充

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: stretch;
  span {
    border: 1px solid;
  }
}

11.2 start

单元格内容垂直靠上

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: start;
  span {
    border: 1px solid;
  }
}

11.3 end

单元格内容垂直靠下

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: end;
  span {
    border: 1px solid;
  }
}

11.4 center

单元格内容垂直居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: center;
  span {
    border: 1px solid;
  }
}

12. place-items

是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值,则浏览器认为与第一个值相等。例:设置单元格内容垂直和水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  place-items: center;
  span {
    border: 1px solid;
  }
}

13. justify-content

容器内容水平位置:start、end、center、stretch、space-around、space-between、space-evenly

13.1 start

默认容器内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: start;
  span {
    border: 1px solid;
  }
}

13.2 end

例:设置容器内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: end;
  span {
    border: 1px solid;
  }
}

13.3 center

例:设置容器内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: center;
  span {
    border: 1px solid;
  }
}

13.4 space-around

例:设置容器内容水平平均分布,项目间距是项目距离容器边框的两倍

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-around;
  span {
    border: 1px solid;
  }
}

13.5 space-between

例:设置容器内容水平平均分布,靠近容器边框项目紧贴容器,其余水平项目平均间距

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-between;
  span {
    border: 1px solid;
  }
}

13.6 space-evenly

例:设置容器内容水平平均分布,项目间距和项目距离容器边框间距相等

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-evenly;
  span {
    border: 1px solid;
  }
}

14. align-content

容器内容垂直位置:start、end、center、stretch、space-around、space-between、space-evenly,同 justify-content 属性一致。一般需要给容器设置固定高度。align-content 属性才有效。例:设置容器内容垂直居中

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  align-content: center;
  span {
    border: 1px solid;
  }
}

15. place-content

是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值,浏览器就会假定第二个值等于第一个值。例:设置容器内容水平居中,垂直居中。

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  place-content: center;
  span {
    border: 1px solid;
  }
}

三 项目属性

1. grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area

grid-column-start: number; 左边框垂直网格线

grid-column-end: number; 右边框垂直网格线

grid-column: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-row-start: number; 上边框垂直网格线

grid-row-end: number; 下边框垂直网格线

grid-row: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 上、左、下、右边框垂直网格线简写

number 值默认从 1 开始依次递增。

例:设置一个 3 列每列宽 200px,3 行每行高 200px,让内容为 1 的项目居中。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: red;
  }
}
 
// grid-column、grid-row 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: red;
  }
}
 
// grid-area 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-area: 2 / 2 / 3 / 3;
    background: red;
  }
}

2. justify-self

单元格内容的水平位置,同 justify-items 但只作用于单个项目。赋值:start、end、center、stretch。

3. align-self

单元格内容的垂直位置,同 align-items 但只作用于单个项目。赋值:start、end、center、stretch。

4. place-self

justify-self 和 align-self 简写,同 place-items 但只作用于单个项目。只有一个值时,第二个值默认与第一个值相同。


目录
相关文章
|
1天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
6 0
|
1天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
9 0
|
2天前
|
前端开发 开发者 容器
CSS基础-Grid布局基础
【6月更文挑战第11天】CSS Grid布局简化了网页设计,提供前所未有的灵活性。本文探讨Grid基础、常见问题及解决方案。学习重点包括理解容器和项目、正确使用网格线、避免固定单位、有效对齐元素以及选择合适布局模型。通过深入学习、实践调试和参考资源,设计师能避免陷阱,掌握这一现代布局技术。实践是关键,不断尝试将使你在Grid布局中游刃有余。
|
2天前
|
前端开发 开发者 容器
CSS基础-Flexbox布局基础
【6月更文挑战第11天】Flexbox是CSS3的全新布局模式,简化了网页动态布局问题。通过`display: flex`设置容器,调整`flex-direction`、`justify-content`、`align-items`等属性控制项目排列和对齐。适用于响应式布局、均匀分布空间和元素对齐。注意浏览器兼容性、选择合适布局模式及区分对齐与排序属性。通过实例代码学习和实践,掌握Flexbox能有效提升网页布局效率。
|
7天前
|
Web App开发 前端开发
CSS布局快速入门
CSS布局快速入门
12 0
|
8天前
|
前端开发 容器
7. CSS 网格布局
7. CSS 网格布局
12 4
|
8天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
10天前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
10天前
|
前端开发 编解码
css的布局方式
css的布局方式
16 4
|
10天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
15 2