css 3 сетки - как выровнять изображения?

Question

Я пытаюсь использовать CSS 3 Grid, чтобы сделать определенное c размещение моей домашней страницы с использованием изображений, которые я импортировал. Вот чего я хочу достичь:

Это то, что у меня есть в моей сетке на данный момент:

Это мой код:

<div class="wrapper">

    <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>
    <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>
    <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>
    <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>
    <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>


</div>

@endsection

@push('style')
<style>

.wrapper{

    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr ;
    grid-auto-rows: minmax(100px,auto);
    padding: 1em;
}


.wrapper >div{

padding: 1em;

}

.bed{

 height: 50%;


}

.pillow{

 height: 50%;
 width:100%;

}
.kitchen{
    height: 50%;
}

.living-room{
    height: 70%;
    width:150%;
}

.sofa{
    height: 50%;
    width:150%;

}

img{
    width:100%;
    height: 100%;
    border-radius: 20px;
}

Как мне расположить мои изображения так, чтобы они были выровнены идентично ожидаемому результату?

Обновлено ::

Answer 1

Обновление

Я удалил явную высоту 800px/600px, и сетка по умолчанию заполняет весь экран.

---

Для простоты я растянул все изображения, чтобы заполнить всю их сетку клетка. Обратите внимание на то, как работают значения grid-row и grid-column. Указывая, как далеко должна охватывать каждая ячейка сетки, высота и ширина естественным образом распределяются по всей сетке. Для этого примера я установил сетку 800px в ширину и 600px в высоту.

Я использую fr единицы для правил сетки, поэтому они будут распределяться относительно, основываясь на их отношениях с другими детьми. Следующая строка говорит браузеру, чтобы длина сетки составляла 8 единиц. Первый столбец будет 3/8 от общей ширины (800px в этом примере). Второй столбец выглядел уже, чем остальные, поэтому я сделал его 2fr.

grid-template-columns: 3fr 2fr 3fr;

Когда вы видите -1 в дочернем измерении сетки, это означает, по существу, go для конец . Например, следующий фрагмент кода говорит, что начинать нужно в строке 3 и охватывать до конца, сколько бы строк не было.

grid-row: 3 / -1;

Demo

.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 1em;
  grid-gap: 0.5em;
  background-color: #eee;
}

.wrapper>div {
  position: relative;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #333;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bed::after {
  content: 'BED';
}

.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
}

.pillow::after {
  content: 'PILLOW';
}

.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}

.kitchen::after {
  content: 'KITCHEN';
}

.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}

.living-room::after {
  content: 'LIVING ROOM';
}

.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

.sofa::after {
  content: 'SOFA';
}

img {
  width: 100%;
  height: 100%;
}

<div class="wrapper">

  <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>
  <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>
  <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>
  <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>
  <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>

</div>

jsFiddle