С шепа стилове можете да използвате това привлекателно, гъвкаво оформление за много типове съдържание на страници.

CSS ви предоставя много гъвкавост, за да проектирате привлекателни, отзивчиви оформления. Оформление в стил списание организира смесено съдържание от текст и изображение в атрактивен, привличащ вниманието формат, което го прави популярен избор.

CSS Grid ви дава инструментите и финия контрол, от които се нуждаете, за да постигнете това оформление, така че това е страхотна техника за усвояване.

Какво представляват оформленията в стил списание?

Оформленията в стил списание използват подобна на решетка структура за подреждане на съдържание в колони и редове.

Те са чудесни за показване на различни видове съдържание като статии, изображения и реклами по организиран и привлекателен начин.

Разбиране на CSS Grid

CSS Grid е надежден инструмент за оформление, който ви позволява позициониране на елементи в двумерно пространство, което улеснява създаване на колони и редове.

При този тип оформление влизат в действие два основни компонента: контейнерът на мрежата, отговорен за дефинирането на структурата на мрежата, и елементите на мрежата, които са дъщерните елементи на контейнера.

instagram viewer

Ето прост пример за това как можете да използвате CSS Grid, за да създадете мрежа 3x3:

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

Този код дефинира мрежов контейнер с три колони с еднаква ширина и 20px празнина между елементите. Ето резултата:

Настройка на 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>

Дефиниране на мрежовия контейнер

За да създадете мрежа за вашето оформление в стил списание, добавете следния 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 указва, че контейнерният елемент, .оформление на списание, е мрежов контейнер, използващ декларацията дисплей: решетка.

Свойствата grid-template-columns и grid-template-rows използват комбинация от повторете, автоматично напасване, и minmax. Те гарантират, че ширините на колоните и височините на редовете са поне 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 е гъвкав инструмент, който можете да използвате за създаване на оформления в стил списание, които се приспособяват към различни размери на екрана. Тя ви позволява да дефинирате мрежови структури, да поставяте елементи и да коригирате оформления.

Експериментирайте с различни конфигурации и стилове на мрежата, за да постигнете перфектното оформление, вдъхновено от списанието, за вашия уебсайт.