grid - 网格项目对齐方式（Box Alignment）

CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。

 <view class="grid">
   <view class='item1'>1</view>
   <!-- <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
   <view class='item'>8</view>
   <view class='item'>9</view> -->
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-template-rows: 80px 80px;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "content content" "content content";
   border: 1px solid #ccc;
 }

 .grid {
   justify-items: start;
   /* justify-items: end; */
   /* justify-items: center; */
   /* justify-items: stretch; */
 }

 .item1 {
   grid-area: content;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #fff;
   border-radius: 0.2rem;
   font-size: 0.8em;
   min-height: 3rem;
   padding: 0.75rem;
   color: #f0f0f3;
   /* background-color: #e91e63; */
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   /* text-align: center; */
   background-color: #1aa034;
 }

justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

justify-items和align-items应用在网格容器上，它们的属性值有：

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

1. justify-items

• stretch

2. align-items

align-items: stretch(网格项目横跨整个列)

网格项目定位在网格行和列的中间（实现水平垂直居中）。

　　

 <view class="grid">
   <view class='item1'>1</view>
   <!-- <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
   <view class='item'>8</view>
   <view class='item'>9</view> -->
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-template-rows: 80px 80px;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: "content content" "content content";
   border: 1px solid #ccc;
 }

 .grid {
   justify-items: center;
   align-items: center;
   /* align-items: start; */
   /* align-items: center; */
   /* align-items: end; */
   /* justify-items: start; */
   /* justify-items: end; */
   /* justify-items: center; */
   /* justify-items: stretch; */
 }

 .item1 {
   grid-area: content;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #fff;
   border-radius: 0.2rem;
   font-size: 0.8em;
   min-height: 3rem;
   padding: 0.75rem;
   color: #f0f0f3;
   /* background-color: #e91e63; */
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   /* text-align: center; */
   background-color: #1aa034;
 }

  justify-items: center;
  align-items: center;