新闻界面  热点事件  热点新闻   

<div style="width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0px, 1fr));
gap: 24px;">

    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>

</div>


.item {
    height: 350px;
}

设置三行四列 布局

<style>
    /* 为网格容器添加边框 */
    .grid-container {
        border: 2px solid #ff0000;     /* 容器外围边框 */
        border-radius: 8px;            /* 可选圆角效果 */
        padding: 24px; /* 创建内边距让边框可见 */
        box-sizing: border-box;        /* 防止边框影响尺寸 */

        display: grid;
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 200px 200px 200px 200px ;
        gap: 0px; /* 网络的间隔 */
    }

    .item {
        background-color: #00a2d4;
        border: 2px solid #000;        /* 网格项边框 */
        margin: -1px; /* 关键：负边距抵消重叠 */
        box-sizing: border-box;        /* 防止边框影响尺寸 */
    }

</style>
<div class="grid-container" >

    <div class="item"  ></div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>

    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>

    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>

    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
    <div class="item">34</div>
</div>

注解：如果多一行，那么就是默认=没有高度。

最后一列也可以设置成auto

/* 为网格容器添加边框 */
.grid-container {
    border: 2px solid #ff0000;     /* 容器外围边框 */
    border-radius: 8px;            /* 可选圆角效果 */
    padding: 24px; /* 创建内边距让边框可见 */
    box-sizing: border-box;        /* 防止边框影响尺寸 */
    
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 200px 200px 200px auto;
    gap: 0px; /* 网络的间隔 */
}

最后一列 就随着屏幕宽而变化。

还可以简写。 

{
    : : }
.{
    : : (): ():: : }

.{
    : : : -: }

1fr是等分。3等分 高，。

网络布局 2列  n行。1fr

        <view style="display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; text-align: right; padding: 20rpx;">
        //grid-template-columns: 1fr 1fr;  这是定义有2列   1fr是宽相等铺满。 跟flex:1差不多。
          <view class="sort_item act"   >
            <text >数量从小到大</text>
          </view>
          <view class="sort_item  "   >
            <text>数量从大到小</text>
          </view>
          <view class="sort_item  "   >
            <text>时间从晚到早</text>
          </view>
          <view class="sort_item  "   >
            <text>时间从早到晚</text>
          </view>
          <view class="sort_item  "   >
            <text>单价从小到大</text>
          </view>
          <view class="sort_item  "   >
            <text>单价从大到小</text>
          </view>
        </view>

/* 容器定义 */
.container {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* 三行：第一、三行高度自适应，第二行占剩余空间 */
  grid-template-columns: 1fr 1fr;     /* 定义两列，各占1份 */
  gap: 10px;                          /* 行列间距 */
  height: 100vh;                       /* 容器高度为视口高度（可根据需求调整） */
}

/* 第一行元素（整行） */
.row1 {
  grid-column: 1 / -1;                /* 跨所有列 */
  background: #f0f0f0;
}

/* 第二行元素（分为两列） */
.row2-left {
  grid-column: 1 / 2;                 /* 占据第一列 */
  background: #ffcccc;
}
.row2-right {
  grid-column: 2 / 3;                 /* 占据第二列 */
  background: #ccffcc;
}

/* 第三行元素（整行） */
.row3 {
  grid-column: 1 / -1;                /* 跨所有列 */
  background: #ccccff;
}


<div class="container">
  <div class="row1">第一行（整行）</div>
  <div class="row2-left">第二行左列</div>
  <div class="row2-right">第二行右列</div>
  <div class="row3">第三行（整行）</div>
</div>

关键点解析

1. ‌容器设置‌

• display: grid 声明容器为Grid布局12。

• grid-template-rows 定义三行高度：第一、三行高度由内容决定（auto），第二行占剩余空间（1fr）8。

• grid-template-columns: 1fr 1fr 将第二行划分为两列等宽区域5。

2. ‌跨列控制‌

• 第一行和第三行通过 grid-column: 1 / -1 跨所有列（从第1列起始到最后一列结束）58。

• 第二行的两列分别通过 grid-column: 1/2 和 2/3 定位到对应列57。

3. ‌响应式优化‌

• 若需响应式调整列数，可使用 repeat(auto-fill, minmax(260px, 1fr)) 自动填充列（需调整容器宽度）5。