html - 如何更改特定的网格列？

问题描述

这六个盒子有一个grid-template-columns。2fr 4fr我想做的只是制作“box3”和“box4” 4fr 2fr（反转）。换句话说，我只希望“box3”大于“box4”。我希望这是有道理的。

这是原文：

这就是我希望 box3 和 box4 的样子：

.box{
        background-color: green;
        box-shadow: 2px 2px 2px;
    }
    
    .container{
        display: grid;
        grid-template-columns: 2fr 4fr;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 0.5rem;
        justify-content: center;
        text-align: center;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="stylesheet" type="text/css" href="test.css" media="all">
    </head>
    <body>
      <div class="container">
        <div class="box1 box">box 1</div>
        <div class="box2 box">box 2</div>
        <div class="box3 box">box 3</div>
        <div class="box4 box">box 4</div>
        <div class="box5 box">box 5</div>
        <div class="box6 box">box 6</div>
      </div>
      </body>
      </html>

标签： htmlcss

.box {
  background-color: green;
  box-shadow: 2px 2px 2px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px 200px;
  grid-gap: 0.5rem;
  justify-content: center;
  text-align: center;
}

.box2,
.box6 {
  grid-column: 2 / span 2;
}

.box3 {
  grid-column: 1 / span 2;
}

<div class="container">
  <div class="box1 box big">box 1</div>
  <div class="box2 box small">box 2</div>
  <div class="box3 box">box 3</div>
  <div class="box4 box">box 4</div>
  <div class="box5 box">box 5</div>
  <div class="box6 box">box 6</div>
</div>

我相信有很多方法可以实现它。您可以简单地使用grid-column: 2 / span 2来完成

如果你想使用网格布局，你应该看看这个教程：

https://css-tricks.com/snippets/css/complete-guide-grid/

html - 如何更改特定的网格列？

问题描述

解决方案

推荐阅读