Az olyan weboldalak által készített képgalériákat , mint az Unsplash, a Pinterest stb., Olyan technikákkal készítik, mint a képelem pozícionálása vagy lefordítása, ami nagyon nehézkes feladat. A CSS Grids segítségével nagyon gyorsan elérheti ugyanazt a funkciót .
Például: Fent egy képgaléria változó szélességű és magasságú képekkel, amely tökéletes felhasználási lehetőség CSS-hálózatokhoz.Kezdjük el!
A mögöttes rács
Most hozzunk létre egy 8x8-as rácsot . Készíthetünk más méretű rácsokat is, de ez a kívánt galéria típusától függ. Esetünkben egy 8x8-as rács lesz ideális.
- A rács konténert úgy definiáljuk, hogy egy elem megjelenítési tulajdonságát a rácsra állítjuk . Tehát a div , az osztályrács lesz a rácstartályunk .
- A rács-sablon-oszlopok tulajdonsággal állítjuk be az oszlopsávokat , a rács-sablon-sorok pedig a sorsávokat. Ezeket a tulajdonságokat a rácstartályon deklaráljuk. Példánkban egy 8x8-as rácstartályt készítünk.
- rács-rés: Meghatározza a sorok és oszlopok közötti rés méretét a rács elrendezésében. A rácsrés értéke bármely CSS hosszegység lehet. Példánkban a 15px értéket adtam meg , hogy a rácsunk jobban nézzen ki .
HTML:
CSS:
.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Megjegyzés:
Az összes közvetlen gyerek a rács automatikusan vált rács terméket .
Rácselemek beszúrása
Most beillesztjük a rácselemeket a rácstartályba:
Képek stílusa
.gallery__img { width: 100%; height: 100%; object-fit: cover; }Beállítása objektum illeszkedik értéket fedél van, mint a beállítás a háttér méretét a fedelet a háttérképet . Ezt azért tesszük, hogy a kép kitöltse mezőjének (rácselem) magasságát és szélességét, fenntartva az oldalarányt.
Megjegyzés: Az object fit tulajdonság csak akkor működik, ha beállítjuk a szélesség és a magasság tulajdonságait.
Megjegyzés:
Alapértelmezés szerint a rács elemei a rács automatikus elhelyezésének szabályai szerint kerülnek elhelyezésre .
Rácselemek pozicionálása
Mielőtt elkezdenénk elhelyezni a rácselemeket, tanulmányozni fogunk néhány alapfogalmat.
A rács div a rácstartály , és az összes közvetlen gyermekelem a rács elem . Amikor a rács sávokat rács-sablon-oszlopokkal és rács-sablon-sorokkal definiáltuk, a rács számozott vonalakat adott nekünk , amelyeket rácsvonalaknak nevezünk az elemek pozícionálásához. Az egyes rácsvonalakra numerikus mutatóval hivatkozhat.
Oszlopok kezdődik egy , ettől balra a jobb alapból, sorok is kezdődik az egyik a felső és alsó . Tart két rácsvonalak , hogy egyetlen oszlopban vagy sorban, egy vonal mindkét oldalán, így a 8-oszlopra , és 8-soros rács áll
9 oszlopos és 9 soros vonalak .
Az 1. és 2. függőleges vonal meghatározza az első oszlop kezdő és végpontját . Lines 2 és 3 a második oszlop , és így tovább. Hasonlóképpen, az 1. és 2. vízszintes vonalak határozzák meg az első sor helyzetét, a 2. és 3. vonalak pedig a második sort stb. A fenti fogalmak ismerete segít megérteni, hogyan helyezzük el az elemeket (képeket) a rácsunkon.
Most fogjuk használni grid sorszámok szabályozni, milyen tételek kerülnek alkalmazásával ingatlan közvetlenül a rács elemet. Megadhatjuk, hogy egy rácselem melyik soron kezdődik és fejeződik be , és hány sávnak kell kibővülnie .
1. rácselem
Készítsünk tehát egy új szabályt, amely az első rácselemet célozza meg. Először a rács-oszlop-kezdet tulajdonságot használjuk az oszlop rács sorának megjelölésére, ahol az első rács elem kezdődik. A rács-oszlop-vég jelzi az első rácselem végét.
Tehát a rács-oszlop-kezdő érték egy szám, amely az oszlop bal szélén a rácsvonalat jelöli. A rács-oszlop-vég értéke azt a rácsvonalat jelöli, amely az oszlop jobb szélét jelöli.
Azaz, például az alábbiakban megadott, amelyben rácsos oszlop indul az 1 és grid-oszlop-end a 3 azt jelenti, hogy a rács elem nyúlik a bal szélén a rács vonal, 1-es vonal a 3-as vonal , a feltöltésnél 2 oszlop . A rács-sor-kezdet és a rács-sor-vég tulajdonságokkal szintén meg fogjuk jelölni a rácselem kezdetének és végének helyzetét a sorrácsvonalakon, ugyanúgy, mint az oszlop esetében.
.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Megjegyzés:
Most más elemeket helyezünk el ugyanazokon az elveken, amelyeket fent tanultunk.
2. rácselem
.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }
3. rácselem
.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }
4. rácselem
.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }
5. rácselem
.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }
6. rácselem
.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }
You can find the complete code below.
CSS Grids Gallery And the CSS:
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.
You can learn more about the CSS Grids in the link given below
A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com
I hope you’ve found this post informative and helpful. I would love to hear your feedback!
Thank you for reading!