А как вам такое? Я задал переменной gap
расстояние между grid-элементами.
Почему-то эта штука начинает нормально работать тут, только когда откроешь её на весь экран с открытой консолью разработчика (у меня Google Chrome).
В редакторе на компьютере - всё отлично, можете сами проверить
UPD: заметил, что если кликать на выполнить код(с закрытой консолью), то рандомно, в какой то момент нету полосы прокрутки по ширине, но чаще прокрутка есть
Поясню, что накалякал:
:root {
--gap: 10px;
}
.wrapper {
display: grid;
grid-gap: var(--gap);
grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
}
в :root
я задаю переменную --gap
, равную 10px, чтобы использовать для отступа между grid-элементами.
.wrapper
задаю, что это grid-сетка display: grid
Задаю отступ в 10px между grid-элементами, используя ранее объявленную переменую grid-gap: var(--gap)
grid-template-rows
отвечает за размер элементов по вертикали
grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2)
Нам нужно задать, что высота каждого элемента равна будет равна 1/4 от ширины экрана или 25vw
, но у нас также есть отступ в 10px между элементами по вертикали. Чтобы убрать эти 10px, нужно их вычесть из всех ширин, а точнее - первому и второму элементу по вертикали вычесть 10px/2, получится, что у каждого вычли по 5px, в сумме 10px.
grid-template-columns
задаёт размер элементов по горизонтали
grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2)
Первый элемент по ширине можно считать за два обычных по 1/4 от ширины экрана. всего у нас 2 отступа по 10px, в сумме 20px, значит, чтобы всё было ровно, надо из каждого элемента вычесть 5px, а точнее, из первого вычесть два раза по 5 px calc(50vw - var(--gap))
, а из второго и третьего по 5px просто calc(25vw - var(--gap)/2)
.
Первый элемент, чтобы был на всю высоту, нужно задать, что он начинается с первой линии grid-row-start: 1
и заканчивается на начале третьей линии grid-row-end: 3
.item:nth-child(1) {
background-color: black;
grid-row-start: 1;
grid-row-end: 3;
font-size: 30px;
font-weight: bold;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
color: black;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
:root {
--gap: 10px;
}
.wrapper {
display: grid;
grid-gap: var(--gap);
grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
}
.item {
background-color: orange;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
color: white;
white-space: nowrap;
overflow-x: hidden;
}
.item:nth-child(1) {
background-color: black;
grid-row-start: 1;
grid-row-end: 3;
font-size: 30px;
font-weight: bold;
}
<div class="wrapper">
<div class="item">I am Black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
</div>
Можно сделать также без отступов, тогда не надо будет ничего считать
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
color: black;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.wrapper {
display: grid;
grid-template-rows: 25vw 25vw;
grid-template-columns: 50vw 25vw 25vw;
}
.item {
background-color: orange;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
color: white;
white-space: nowrap;
overflow-x: hidden;
}
.item:nth-child(1) {
background-color: black;
grid-row-start: 1;
grid-row-end: 3;
font-size: 30px;
font-weight: bold;
}
.item:nth-child(3) {
background-color: #2e5fc1;
}
.item:nth-child(4) {
background-color: #2e5fc1;
}
<div class="wrapper">
<div class="item">I am Black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
<div class="item">I am not black</div>
</div>
Вот этот вариант вроде работает в IE11. Вы можете использовать также autoprefixer, чтобы добавить к своему коду нужные префиксы
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
color: black;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.wrapper, .wrapper__2, .wrapper__3, .wrapper__4, .item {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.wrapper__2 {
flex-direction: column;
}
.item {
background-color: orange;
justify-content: center;
align-items: center;
color: white;
white-space: nowrap;
overflow-x: hidden;
height: 100%;
}
.wrapper__1 .item {
background-color: black;
width: 50vw;
height: 50vw;
font-size: 30px;
font-weight: bold;
}
.wrapper__2 .item {
height: 25vw;
width: 25vw;
}
.wrapper__3 .item:nth-child(1),
.wrapper__4 .item:nth-child(2) {
background-color: #2e5fc1;
}
<div class="wrapper">
<div class="wrapper__1">
<div class="item">I am Black</div>
</div>
<div class="wrapper__2">
<div class="wrapper__3">
<div class="item">I am not black</div>
<div class="item">I am not black</div>
</div>
<div class="wrapper__4">
<div class="item">I am not black</div>
<div class="item">I am not black</div>
</div>
</div>
</div>
vw
, которая составляет 1% от ширины. То естьheight: 50vw;