Gird网格布局学习笔记分享资源-CSDN下载

共28个文件

html：14个

png：13个

md：1个

gird

页面布局

68 浏览量 2024-08-21 00:04:23 上传评论收藏 216KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Gird-example.zip （28个子文件）

Gird-example

demo7.html 2KB

demo3.html 1KB

asset

Snipaste_2024-08-20_21-38-59.png 6KB

Snipaste_2024-08-20_11-25-07.png 73KB

Snipaste_2024-08-20_12-51-51.png 11KB

Snipaste_2024-08-20_13-07-29.png 6KB

Snipaste_2024-08-20_16-12-18.png 20KB

Snipaste_2024-08-20_21-18-58.png 5KB

Snipaste_2024-08-20_16-29-24.png 18KB

Snipaste_2024-08-20_23-18-37.png 12KB

Snipaste_2024-08-20_12-58-56.png 4KB

Snipaste_2024-08-20_21-02-36.png 11KB

Snipaste_2024-08-21_00-00-48.png 21KB

Snipaste_2024-08-20_17-13-36.png 12KB

Snipaste_2024-08-20_22-16-00.png 36KB

demo9.html 2KB

demo4.html 1KB

grid-outline.md 3KB

demo8.html 1KB

demo14.html 1KB

demo13.html 1KB

demo2.html 2KB

demo5.html 1KB

demo1.html 1KB

demo11.html 2KB

demo10.html 2KB

demo12.html 1KB

demo6.html 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>所有项目在容器中的对齐方式</title> <style> .container { width: 400px; height: 400px; background-color: antiquewhite; /* 声明Gird容器*/ display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); /* 当容器中有剩余空间的时候, 对所有的项目设置对齐方式才有意义 */ /* 水平对齐方式 */ justify-content: start; /* 垂直方向对齐方式*/ align-content: start; /* 水平居中, 垂直靠底部 */ justify-content: center; align-content: end; /* 容器的剩余空间在项目的行与列之间的分配方案 */ /* 水平两端对齐: 首尾项目贴边, 中间项目空间相等 */ justify-content: space-between; /* 水平分散对齐: 每个项目左右两侧空间相等 */ justify-content: space-around; /* 水平平均对齐: 每个项目之间的空间完全相等*/ justify-content: space-evenly; /* 垂直方向两端对齐 */ align-content: space-between; /* 垂直方向分散对齐 */ align-content: space-around; /* 垂直方向平均对齐 */ align-content: space-evenly; /* 水平垂直默认是拉伸, 拉伸是不固定大小 , 铺满容器*/ justify-content: stretch; align-content: stretch; /* 为了跟flex布局的属性相区别,建议使用他们的简写语法 */ /* place-content: 垂直对齐方式水平对齐方式 */ /* 垂直与水平相同 , 可以只有一个值 */ place-content: center; } .item { background-color: aquamarine; font-size: 2rem; } </style> </head> <body>  <div class="container">  <span class="item item1">1</span> <span class="item item2">2</span> <span class="item item3">3</span> <span class="item item4">4</span> <span class="item item5">5</span> <span class="item item6">6</span> <span class="item item7">7</span> <span class="item item8">8</span> <span class="item item9">9</span> </div> </body> </html>

评论收藏

内容反馈