Izmantojot dažus stilus, varat izmantot šo pievilcīgo, elastīgo izkārtojumu daudzu veidu lapas saturam.
CSS nodrošina daudz elastības, lai jūs varētu izstrādāt pievilcīgus, atsaucīgus izkārtojumus. Žurnāla stila izkārtojums organizē jauktu teksta un attēlu saturu pievilcīgā, uzkrītošā formātā, padarot to par populāru izvēli.
CSS Grid sniedz jums nepieciešamos rīkus un precīzas vadības iespējas, lai sasniegtu šo izkārtojumu, tāpēc tas ir lielisks paņēmiens, ko mācīties.
Kas ir žurnālu stila izkārtojumi?
Žurnāla stila izkārtojumos tiek izmantota režģim līdzīga struktūra, lai sakārtotu saturu kolonnās un rindās.
Tie ir lieliski piemēroti, lai organizētā un pievilcīgā veidā parādītu dažāda veida saturu, piemēram, rakstus, attēlus un reklāmas.
Izpratne par CSS režģi
CSS Grid ir spēcīgs izkārtojuma rīks, kas ļauj jums pozicionēšanas elementi divdimensiju telpā, padarot to viegli izveidot kolonnas un rindas.
Izmantojot šāda veida izkārtojumu, tiek izmantotas divas galvenās sastāvdaļas: režģa konteiners, kas ir atbildīgs par režģa struktūras definēšanu, un režģa vienumi, kas ir konteinera pakārtotie elementi.
Šeit ir vienkāršs piemērs tam, kā varat izmantot CSS režģi, lai izveidotu 3x3 režģi:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Šis kods definē režģa konteineru ar trim vienāda platuma kolonnām un 20 pikseļu atstarpi starp vienumiem. Lūk, rezultāts:
HTML struktūras iestatīšana
Žurnāla stila izkārtojumam jums būs nepieciešams labi strukturēts HTML dokuments. Apsveriet izmantojot semantiskos elementus, lai sakārtotu saturu patīk
<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>
Režģa konteinera definēšana
Lai izveidotu režģi žurnāla stila izkārtojumam, pievienojiet šādu CSS kodu:
.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;
}
Šis CSS norāda, ka konteinera elements, .magazine-layout, ir režģa konteiners, kas izmanto deklarāciju displejs: režģis.
Režģa-veidnes-kolonnas un režģa-veidnes-rindu rekvizīti izmanto kombināciju atkārtojiet, automātiska pielāgošana, un minmax. Tie nodrošina, ka kolonnu platums un rindu augstums ir vismaz 250 pikseļi, un katrā ietilptu pēc iespējas vairāk priekšmetu.
Režģa elementu novietošana
Tagad izveidojiet stilu katram rakstam un tā saturam, lai izveidotu pievilcīgus sīktēlu stila elementus:
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;
}
Šajā brīdī jūsu tīmekļa lapai vajadzētu izskatīties šādi:
Žurnāla stila izkārtojumu izveide
Lai iegūtu patiesu žurnāla stila izskatu, pievienojiet CSS stilus, lai aptvertu raksta elementus jebkurā vēlamajā secībā:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Jūsu lapai tagad vajadzētu izskatīties šādi:
Atsaucīgs dizains ar CSS režģi
Viena no CSS Grid priekšrocībām ir tā raksturīgā reaģētspēja. Jūs varat izmantojiet multivides vaicājumus, lai pielāgotu izkārtojumu dažādiem ekrāna izmēriem. Piemēram:
/* 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;
}
}
Šie multivides vaicājumi pārslēdzas starp vairākām izkārtojuma definīcijām, lai tās vislabāk atbilstu ierīces ekrāna izmēram. Jūsu galīgais izkārtojums tiks pielāgots dažādiem izmēriem:
Izkārtojumu pārveidošana, izmantojot CSS režģi
CSS Grid ir elastīgs rīks, ko varat izmantot, lai izveidotu žurnāla stila izkārtojumus, kas pielāgoti dažādiem ekrāna izmēriem. Tas ļauj definēt režģa struktūras, izvietot vienumus un pielāgot izkārtojumus.
Eksperimentējiet ar dažādām režģa konfigurācijām un stiliem, lai savai vietnei izveidotu perfektu žurnālu iedvesmotu izkārtojumu.
