Как сделать такую grid сетку?

Question

[Bazliter]

Comments

[Ankhena]

Как сделать такую grid сетку?

Посчитать количество столбцов - 2
Посчитать количество строк - 2
Задать gap.

Тому элементу, который должен занять 2 строки написать grid-row: span 2

Answer 1

[SHKD]

<section id="three-blocks-one-hundred-two-fifty">
            <div class="container-fluid">
				<div class="wrap">
					<div class="left">
						<div class="card left-card-top">
							<div class="card-wrap">
								<h2 class="title">Заголовок</h2>
								<p class="desc">Текст описания</p>
								<button href="#" class="btn white-btn">Действие</button>
							</div>
						</div>
						<div class="card left-card-bottom">
							<div class="card-wrap">
								<h2 class="subtitle">Заголовок</h2>
								<p class="desc">Текст описания</p>
								<button href="#" class="btn white-btn">Действие</button>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="card right-card">
							<div class="card-wrap">
								<h2 class="title">Заголовок</h2>
								<p class="desc">Текст описания</p>
								<button href="#" class="btn white-btn">Действие</button>
							</div>
						</div>
					</div>
				</div>
			</div>
        </section>

.wrap {
	display: flex;
}

.title {
	margin-top: 0;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.desc {
	margin: 0;
	color: #acacac;
}

/*start section three-blocks-one-hundred-two-fifty*/
#three-blocks-one-hundred-two-fifty .right {
	flex-basis: 50%;
	margin: 1px 1px 1px 2px;
}

#three-blocks-one-hundred-two-fifty .left {
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	margin: 1px 2px 1px 1px;
}

#three-blocks-one-hundred-two-fifty .card {
	display: flex;
	align-items: flex-end;
	background-color: #262626;
	padding: 40px;
	color: #fff;
}

#three-blocks-one-hundred-two-fifty .right-card {
	min-height: 100%;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.5s;
}

#three-blocks-one-hundred-two-fifty .left-card-top {
	flex-basis: 50%;
	margin-bottom: 2px;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.5s;
}

#three-blocks-one-hundred-two-fifty .left-card-bottom {
	flex-basis: 50%;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.5s;
}
/*end section three-blocks-one-hundred-two-fifty*/

Comments

[Ankhena]

Это что, grid?

Answer 2

[Oleg Smychenko]

Вот - наглядное пособие