grid

CSS Grid布局详解

最新推荐文章于 2025-05-09 16:47:21 发布

转载最新推荐文章于 2025-05-09 16:47:21 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CheeseIce/p/9692601.html

fr：

弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。

布局文件里面设置布局的一些单位和方法；
如下：

1px 一个像素点
1dpi 一英寸有多少个像素点
1dp 在dpi为160的屏幕上: 1dp = 1px px = 160*(dpi的值/160)
1sp 设置文字大小，随着字体大小的改变字体也跟着改变
layout_margin 外边距
layout_marginTop 上外边距
layout_marginBottom 下外边距
layout_marginLeft 左外边距
layout_marginRight 右外边距
padding 内边距
paddingTop 上内边距
paddingBottom 下内边距
paddingLeft 左内边距
paddingRight 右内边距

CSS

.wrapper {
  display: grid;/*通过display属性设置属性值为grid可以创建一个网格容器。*/
  grid-template-columns: repeat(3, 1fr);/*repeat()来创建三列，而且每列的列宽是1fr（1fr = 网格宽度 / 3）
  grid-gap: 10px;/*行和列的间距相等为10px*/
  grid-auto-rows: minmax(100px, auto);/*第一行的高度最小值是100px，但其最大值为auto*/
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;/*供一个值，则指定了grid-row-start值*/

} .two { grid-column: 2 / 4; grid-row: 1 / 3;
　　　　/*==
　　　　grid-column-start: 2;
　　　　grid-column-end: 4; 
　　　　grid-row-start: 1; 
　　　　grid-row-end: 3;
　　　　//
　　　　grid-area: 2/4/1/3;
　　　　*/
　　　　}
.three {
  grid-column: 1;/*供一个值，则指定了grid-column-start值*/
  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;

转载于:https://www.cnblogs.com/CheeseIce/p/9692601.html