Html 如何在网格中拥有离散的行

for(const el of [...document.getElementsByClassName('row')]) el.onclick=e => {el.style.backgroundColor = 'red'};

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.row {
  display: grid;
  grid-template-columns: max-content 1fr;
  background-color: #F0F0FF;
}

.col {
  width: max-content;
}

div {
border: 1px solid red;
margin: 10px;
}

Column span
<div class="container">
    <div class="col">323232323232</div>
    <div>1</div>
    <div class="col"></div>
    <div>2</div>
    <div class="col"></div>
    <div>3</div>
</div>

Row element
<div>
  <div class="row">
    <div class="col">323232323232</div>
    <div>1</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>2</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>3</div>
  </div>
</div>

for(const el of [...document.getElementsByClassName('row')]) el.onclick=e => {el.style.backgroundColor = 'red'}; 

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.row {
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  background-color: #F0F0FF;
}

.col {
  width: max-content;
}

div {
  border: 1px solid red;
  margin: 10px;
}

<div class="container">
  <div class="row">
    <div class="col">323232323232</div>
    <div>1</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>2</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>3</div>
  </div>
</div>

Html相关问答推荐

XPATH text()函数遇到困难

z—index总是 destruct 我的头，我该如何修复它？

如何正确使用counter()、counter—increment()和counter—reset()嵌套标题？

隐藏滚动条和禁用文本 Select 的CSS技术？

如何使我的组织 struct 图的连接线响应？

在单独的容器之间堆叠上下文

Flexbox在元素之间造成了太大的差距

Chatbox底部显示新消息，并向上推送旧消息

如何将tmap按钮和图例更改为位于页脚后面？

为什么一个 CSS 网格框比其他网格框低？

Flex：第一个 div 有列，下一个 div 有行

如何使活动选项卡背景作为父背景图像

如何为高度较小的块制作边框动画？

如果使用复选框属性更改，如何防止事件更改？

使用图像自定义 CSS 网格边框

用于表行组标题的正确 HTML 标记是什么？

在 iPhone 上分隔 HTML 邮箱输入中的多个邮箱条目

shinydashboard 标题中的位置标题

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条？