как изменить определенные c столбцов сетки? - PullRequest
Новая
       6

как изменить определенные c столбцов сетки?

2 голосов
/ 01 августа 2020

Шесть ящиков имеют grid-template-columns из 2fr 4fr. Я пытаюсь сделать только сделать «box3» и «box4» 4fr 2fr (в обратном порядке). Другими словами, я хочу, чтобы «box3» был больше, чем «box4». Надеюсь, это имело смысл.

Это оригинал: enter image description here

This is how I want box3 and box4 to look like:image 

.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>

Ответы [ 2 ]

2 голосов
/ 01 августа 2020 

.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/

0 голосов
/ 01 августа 2020 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...