Благодаря нескольким стилям вы можете использовать этот привлекательный и гибкий макет для многих типов содержимого страниц.

CSS обеспечивает большую гибкость для создания привлекательных и адаптивных макетов. Макет в журнальном стиле организует смешанный текстовый и графический контент в привлекательном и привлекательном формате, что делает его популярным выбором.

CSS Grid предоставляет вам инструменты и детальный контроль, необходимые для создания такого макета, так что это отличная техника для изучения.

Что такое макеты в журнальном стиле?

Макеты в журнальном стиле используют сеточную структуру для упорядочения контента по столбцам и строкам.

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

Понимание CSS Grid

CSS Grid — это надежный инструмент верстки, который позволяет вам расположение элементов в двумерном пространстве, что позволяет легко создавать столбцы и строки.

При таком типе макета в игру вступают два основных компонента: контейнер сетки, отвечающий за определение структуры сетки, и элементы сетки, которые являются дочерними элементами контейнера.

instagram viewer

Вот простой пример того, как вы можете использовать CSS Grid для создания сетки 3х3:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}

Этот код определяет контейнер сетки с тремя столбцами одинаковой ширины и зазором в 20 пикселей между элементами. Вот результат:

Настройка структуры HTML

Для макета в журнальном стиле вам понадобится хорошо структурированный HTML-документ. Учитывать использование семантических элементов для организации вашего контента нравиться

и
. Вот хорошая отправная точка:

<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>

Определение Grid-контейнера

Чтобы создать сетку для макета в журнальном стиле, добавьте следующий код CSS:

.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;


/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}

Этот CSS указывает, что элемент контейнера, .magazine-layout, представляет собой контейнер сетки, использующий объявление дисплей: сетка.

Свойства Grid-template-columns и Grid-template-rows используют комбинацию повторить, автоподбор, и мин Макс. Это гарантирует, что ширина столбцов и высота строк будут не менее 250 пикселей, и в каждый поместится как можно больше предметов.

Размещение элементов сетки

Теперь стилизуйте каждую статью и ее содержимое, чтобы создать привлекательные элементы в стиле миниатюр:

article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}

На этом этапе ваша веб-страница должна выглядеть примерно так:

Создание макетов в журнальном стиле

Чтобы добиться настоящего журнального вида, добавьте стили CSS, чтобы распределить элементы статьи в любом порядке:

.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}

Теперь ваша страница должна выглядеть так:

Адаптивный дизайн с CSS Grid

Одним из преимуществ CSS Grid является присущая ему быстрота реагирования. Ты можешь используйте медиа-запросы для настройки макета для разных размеров экрана. Например:

/* Media query for screens up to 1100px */
@media screen and (max-width:1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
 }
.article:nth-child(5) {
grid-row: 3 / span 1;
 }
}
/* Media query for screens up to 600px */
@media screen and (max-width:600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
 }
}

Эти медиа-запросы переключаются между несколькими определениями макета, чтобы наилучшим образом соответствовать размеру экрана устройства. Ваш окончательный макет будет адаптирован к разным размерам:

Преобразование ваших макетов с помощью CSS Grid

CSS Grid — это гибкий инструмент, который можно использовать для создания макетов в журнальном стиле, которые подстраиваются под разные размеры экрана. Он позволяет определять структуру сетки, размещать элементы и настраивать макеты.

Поэкспериментируйте с различными конфигурациями и стилями сетки, чтобы создать идеальный макет вашего сайта в стиле журнала.