Сетка и гибкий макет для контейнера карты

Question

Я пытаюсь сделать

Я пытался сделать с дисплеем: гибкий, но у меня не получается, и я не могу сделать его отзывчивым и с сеткой области таким же образом.,

код:

const Grid = styled.div`
  display: grid;
  grid-template-columns: 40wh 1fr;
  background: red;
  & div:nth-child(1) {
    grid-area: 1 / 1 / 5 / 1;
    background: yellow;
  }
`;

export default function App() {
  return (
    <div className="App">
      <Grid>
        <div>a</div>
        <div>b</div>
        <div>b</div>
      </Grid>
    </div>
  );
}

Может ли кто-нибудь помочь мне, как мне добиться этого с помощью системы flex или grid?

пример:

https://codesandbox.io/s/withered-river-d6twt

Answer 1

Grid Solution

Есть много способов сделать sh это. Мне нравится использовать grid-template-areas, чтобы определить явную сетку и разместить мои элементы именно там, где я хочу. Из приведенного ниже кода, в частности значения для grid-template-areas, вы можете видеть, что a охватывает как строку 1, так и строку 2.

Примечание. У вас ошибка CSS:

grid-template-columns: 40wh 1fr; /* <-- wh is not a valid unit */

Я изменил эту строку на:

grid-template-columns: 40vw 1fr 1fr;

Вот полный код.

.grid {
    display: grid;
    grid-template-areas:
      "a b c"
      "a d e";
    grid-gap: 4px;
    grid-template-columns: 40vw 1fr 1fr;
    grid-auto-rows: 100px; 
}

.grid > * {
  background-color: #333;
  color: white;
  position: relative;
}

.a { grid-area: a; }

.b { grid-area: b; }

.c { grid-area: c; }

.d { grid-area: d; }

.e { grid-area: e; }

.grid > * > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="grid">
  <div class="a"><span>a</span></div>
  <div class="b"><span>b</span></div>
  <div class="c"><span>c</span></div>
  <div class="d"><span>d</span></div>
  <div class="e"><span>e</span></div>  
</div>

jsFiddle

---

Flex Solution

Вы заметите пробелы в Следующий код немного взломан по сравнению с Grid. С помощью Grid мы можем express разрывы, используя grip-gap; Flex не дает нам такого инструмента.

.flex {
  display: inline-flex;
}

.left,
.right {
  flex: 1;
  display: flex;
}

.right {
  flex-wrap: wrap;
}

.right > img {
  width: 50%;
  padding-left: 4px;
}

.right > img:nth-child(1),
.right > img:nth-child(2) {
  padding-bottom: 2px;
}

.right > img:nth-child(3),
.right > img:nth-child(4) {
  padding-top: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

<div class="flex">
  <div class="left">
    <img src="http://placekitten.com/500/600" alt="">
  </div>
  <div class="right">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
  </div>
</div>

jsFiddle