В шести полях есть grid-template-columns из 2fr 4fr. Я пытаюсь сделать только make "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>
1
Parham 1 Авг 2020 в 06:18

2 ответа

Лучший ответ
.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/

2
huan feng 1 Авг 2020 в 03:55
.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;
}

.box4 {
 grid-column: 1;
 grid-row: 2;
}
<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="box5 box">box 6</div>
</div>
0
sol 1 Авг 2020 в 03:37