CSS Grid 网格布局-项目属性

代码地址

一. 项目的位置

<div class="box">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
	<div class="item item-4">4</div>
	<div class="item item-5">5</div>
	<div class="item item-6">6</div>
	<div class="item item-7">7</div>
	<div class="item item-8">8</div>
	<div class="item item-9">9</div>
</div>

.box {
  display: grid;
  /* 指定列宽行高、网格线名字 */
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
  grid-auto-rows: 100px;
}

.box .item {
  background-color: #ccc;
}

/* 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。 */
/* 
  grid-column-start属性：左边框所在的垂直网格线
  grid-column-end属性：右边框所在的垂直网格线
  grid-row-start属性：上边框所在的水平网格线
  grid-row-end属性：下边框所在的水平网格线
*/
/* 这些都是非必填属性，没有指定的属性会采用默认位置 */
/* .box .item.item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
} */
/* 这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。 */
/* .box .item.item-2 {
  grid-column-start: c1;
  grid-column-end: c3;
} */

/* 这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。 */
/* 左边框距离右边框跨越2个网格。 */
.box .item.item-2 {
  grid-column-start: span 2;
}
/* 等效 */
.box .item.item-2 {
  grid-column-end: span 2;
}


/* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
/* .box .item.item-2 {
  background-color: red;
  grid-column-start: c1;
  grid-column-end: c3;
  grid-row-start: r1;
  grid-row-end: r3;
} */
/* 等效 */
/* .box .item.item-2 {
  background-color: red;
  grid-column: c1 / c3;
  grid-row: r1 / r3;
} */
/* 结合span使用 */
/* .box .item.item-2 {
  background-color: red;
  grid-column: c1 / span 2;
  grid-row: r1 / span 2;
} */
/* 斜杠以及后面的部分可以省略，默认跨越一个网格。 */
.box .item.item-2 {
  background-color: red;
  grid-column: c1;
  grid-row: r1;
}

二. grid-area

<div class="box">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

.box {
  display: grid;
  /* 指定列宽行高、网格线名字 */
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
  grid-template-areas: 'a b c''d e f''j h i';
}

.box .item {
  background-color: #ccc;
}

/* grid-area属性指定项目放在哪一个区域。 */
/* .box .item.item-2 {
  background-color: red;
  grid-area: e;
} */
/* grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 */
/* grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
.box .item.item-2 {
  background-color: red;
  grid-area: r2 / c2 / r3 / c3;
}

三. place-self

<div class="box">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

.box {
  display: grid;
  /* 指定列宽行高、网格线名字 */
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}
.box .item {
  background-color: #ccc;
}
/* justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。 */
/* align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。 */
/* start | end | center | stretch (默认) */
.box .item.item-2 {
  background-color: red;
  justify-self: center;
  align-self: center;
}
/* place-self属性是align-self属性和justify-self属性的合并简写形式。 */
/* 如果省略第二个值，place-self属性会认为这两个值相等。 */
.box .item.item-2 {
  background-color: red;
  place-self: end;
}