Как создать таблицу сетки 4х3, где два элемента будут иметь высоту 50% - PullRequest
Новая
       33

Как создать таблицу сетки 4х3, где два элемента будут иметь высоту 50%

1 голос
/ 21 марта 2020

Я хочу создать таблицу в виде сетки (два элемента имеют высоту 50%)

example what I need

Мой HTML и Sass код enow выглядит следующим образом: 

<div class="grid">
   <div class="grid__list">
          <div class="grid__item">1</div>
          <div class="grid__item">2</div>
          <div class="grid__item">3</div>
          <div class="grid__item">4</div> 
          <div class="grid__item">5</div>
          <div class="grid__item">6</div>
</div>
</div>

.grid
    &__list
        display: grid
        grid-template-columns: repeat(3, 1fr)
        grid-template-rows: repeat(3, 1fr)
        grid-column-gap: 20px
        grid-row-gap: 20px
        min-height: 1000px
    &__item
        border-radius: 5px
        background: blue
        &:nth-child(1)
            grid-area: 1 / 1 / 4 / 2
        &:nth-child(2)
            grid-area: 1 / 3 / 2 / 4
        &:nth-child(3)
            grid-area: 2 / 3 / 3 / 4
        &:nth-child(4)
            grid-area: 3 / 3 / 4 / 4
        &:nth-child(5)
            grid-area: 1 / 2 / 3 / 3
        &:nth-child(6)
            grid-area: 3 / 2 / 4 / 3

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Вам нужна сетка шесть строк ... не три. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
  grid-auto-flow: column;
  padding: .5em;
}

.grid__item {
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: white;
  grid-row: span 2;
}

.grid__item:nth-child(1) {
  grid-row: span 6
}

.grid__item:nth-child(2),
.grid__item:nth-child(3) {
  grid-row: span 3
}
<div class="grid__list">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
  <div class="grid__item">5</div>
  <div class="grid__item">6</div>
</div>
0 голосов
/ 21 марта 2020

попробуйте это. работает на меня. 

.grid__item {
  border-radius: 5px;
  background: blue;
  &:nth-child(1) {
    grid-column: 1;
    grid-row: 1/4;
  }

  &:nth-child(2) {
    grid-column: 2;
    grid-row: 1/3;
  }

  &:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }      
}
...