CSS забезпечує велику гнучкість для розробки привабливих, адаптивних макетів. Макет у журнальному стилі організовує змішаний вміст тексту та зображень у привабливому форматі, що привертає увагу, що робить його популярним вибором.
Сітка CSS надає вам інструменти та точне керування, які необхідні для створення такого макета, тому це чудова техніка для вивчення.
Що таке макети в журнальному стилі?
Макети журнального типу використовують структуру, подібну до сітки, для розміщення вмісту в стовпцях і рядках.
Вони чудово підходять для відображення різних типів вмісту, наприклад статей, зображень і реклами, у організованому та привабливому вигляді.
Розуміння CSS Grid
Сітка CSS — це надійний інструмент макета, який дозволяє розміщувати елементи в двовимірному просторі, полегшуючи створення стовпців і рядків.
У цьому типі макета в гру вступають два основні компоненти: контейнер сітки, відповідальний за визначення структури сітки, і елементи сітки, які є дочірніми елементами контейнера.
Ось простий приклад того, як ви можете використовувати 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>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
Визначення контейнера Grid
Щоб створити сітку для макета журнального стилю, додайте такий код CSS:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Цей CSS визначає, що контейнерний елемент, .magazine-layout, є сітковим контейнером, який використовує декларацію display: grid.
Властивості grid-template-columns і grid-template-rows використовують комбінацію повторення, автопідгонки та minmax. Вони гарантують, що ширина стовпців і висота рядків становлять принаймні 250 пікселів, а в кожному з них поміщається якомога більше елементів.
Розміщення елементів сітки
Тепер стилізуйте кожну статтю та її вміст, щоб створити привабливі елементи у стилі ескізів:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
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
Однією з переваг CSS Grid є його оперативність. Ви можете використовувати медіа-запити, щоб налаштувати макет для різних розмірів екрана. Наприклад:
@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 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 — це гнучкий інструмент, який можна використовувати для створення макетів у стилі журналу, які адаптуються до різних розмірів екрана. Він дозволяє визначати структуру сітки, розміщувати елементи та коригувати макети.
Експериментуйте з різними конфігураціями та стилями сітки, щоб створити для свого веб-сайту ідеальний макет журналу.