Как сделать такой блок на grid?

Question

[seraphi]

Как расположить блоки так, с помощью grid?



Пока что получается слишком топорно:

<section class="services content">
		<div class="services_title">
			<h3>Наш каталог</h3>
		</div>
		<div class="services_content">
			<div class="services_item">
				<div class="services_item-text">
					<h4>Лазерная эпиляция</h4>
					<p>Аппараты для лазерной эпиляции </p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Коррекция фигуры</h4>
					<p>Аппараты для коррекции фигуры</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Удаление татуировок</h4>
					<p>Лазеры для удаления татуировак</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Аппараты для криотерапии</h4>
					<p>Аппараты для криотерапии</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Аппараты для фотоэпиляции</h4>
					<p>Аппараты для фотоэпиляции</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Лечение сосудов</h4>
					<p>Аппараты для лечения сосудов</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>SMAS лифтинг</h4>
					<p>Аппараты для SMAS лифтинга</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
			<div class="services_item">
				<div class="services_item-text">
					<h4>Другие товары</h4>
					<p>Другие товары для аппаратной косметологии</p>
					<a href="#"><span>узнать больше</span></a>
				</div>
			</div>
		</div>
	</section>

.services_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.services_item {
    padding: 3em 0 3em 2em;
}
.services_content .services_item:nth-child(1) {
	grid-column: 1/3;
    grid-row: 1;
}
.services_content .services_item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
.services_content .services_item:nth-child(3) {
    grid-column: 1/3;
    grid-row: 2;
}
.services_content .services_item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}
.services_content .services_item:nth-child(5) {
	grid-column: 1;
    grid-row: 3;
}
.services_content .services_item:nth-child(6) {
    grid-column: 2/3;
    grid-row: 3;
}
.services_content .services_item:nth-child(7) {
    grid-column: 1;
    grid-row: 4;
}
.services_content .services_item:nth-child(8) {
    grid-column: 2/3;
    grid-row: 4;
}

Answer 1

[Арсений Матыцин]

grid-template-columns: 1fr 1fr;, у тебя три колонки, а не две, должно быть: grid-template-columns: 1fr 1fr 1fr;, а лучше grid-template-columns: repeat(3, 1fr);, потому как если твоим шаблоном управляют вложенные элементы, то ты сам уже потерял контроль. А grid-column: 1/3 вот такую запись проще заменить на grid-column: 1/span 2;. Так наглядно будет видно, сколько занимает ячеек блок.

Answer 2

[ArtJH]

Решение
https://codepen.io/ArtJH/pen/ZEQVQrY

Comments

[seraphi]

Не особо адаптивно, и с права отступ больше

[ArtJH]

seraphi, ну а вы хотели сразу готовое на ложечке? Дальше сами, но путь верный

[ArtJH]

seraphi, https://codepen.io/ArtJH/pen/ZEQVQrY
Адаптив сами сделайте с помощью media запросов, меняя просто ширину flex

[mipfikus]

ArtJH, в вопросе явно указано наличие grid, у вас на флексах

[ArtJH]

mipfikus, не за что!