时间戳

首页 > 解决方案 > 如何使css网格项目更大

html - 如何使css网格项目更大

问题描述

我认为这个问题已被多次问过，但我无法找到有关项目何时在同一grid-row.

我在grid. 我希望上面的项目right占用空间的 2 倍left

我有以下。

谢谢

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 12px;
  grid-template-areas: "icon text text";
  border: 1px solid black;
}

.item-left {
  grid-area: icon;
  border: 1px solid red;
}

.item-right {
  grid-area: text;
  border: 1px solid blue;
}
<div class='container'>
  <div class='item-left'>Left grid item: Icon I want to be small</div>
  <div class='item-right'>Right grid item: Some text I want to be larger</div>
</div>

标签： htmlcsscss-grid

解决方案

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 }
 .left {
  grid-column: 1;
  background-color: red; /* Just so we can see it */
 }
 .right {
  grid-column: 2 / end;
  background-color: blue; /* ^^^ */
 }
<div class="container">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

只需使用三个网格列并对元素进行排序。

推荐阅读