I en tidigare artikel tittade jag på CSS Grids förmåga att skapa komplexa layouter med hjälp av dess automatiska placeringsbefogenheter. Jag tog det ett steg längre i en annan artikel lagt till en zoomande svävningseffekt till bilder i en rutnätslayout. Den här gången vill jag dyka in i en annan typ av rutnät, ett som fungerar med former.
Tänk om bilderna inte är helt fyrkantiga utan istället är formade som hexagoner eller romber? Spoiler alert: vi kan göra det. Faktum är att vi kommer att kombinera CSS Grid-tekniker vi har tittat på och släppa in lite CSS clip-path och mask magi för att skapa snygga rutnät av bilder för nästan vilken form du kan tänka dig!
Låt oss börja med lite uppmärkning
De flesta av layouterna vi ska titta på kan se lätta ut vid första anblicken, men den utmanande delen är att uppnå dem med samma HTML-uppmärkning. Vi kan använda många omslag, divs, och vad som helst, men målet med det här inlägget är att använda samma och minsta mängd HTML-kod och ändå få alla olika rutnät vi vill ha. När allt kommer omkring, vad är CSS annat än ett sätt att separera styling och markering? Vår styling ska inte bero på markeringen och vice versa.
Detta sagt, låt oss börja med detta:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>En behållare med bilder är allt vi behöver här. Inget mer!
CSS Grid of Hexagons
Detta kallas ibland också för ett "bikake"-rutnät.
Det finns redan massor av andra blogginlägg där ute som visar hur man gör detta. Fan, jag skrev en här på CSS-Tricks! Den artikeln är fortfarande bra och går väldigt djupt in på att skapa en responsiv layout. Men för det här specifika fallet kommer vi att förlita oss på en mycket enklare CSS-metod.
Först, låt oss använda clip-path på bilderna för att skapa hexagonformen och vi placerar alla i samma rutnätsområde så att de överlappar varandra.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Inget fancy ännu. Alla bilder är hexagoner och ovanför varandra. Så det ser ut som att allt vi har är ett enda hexagonformat bildelement, men det finns verkligen sju.
Nästa steg är att tillämpa en översättning på bilderna för att placera dem korrekt på rutnätet.
Lägg märke till att vi fortfarande vill att en av bilderna ska vara kvar i mitten. Resten placeras runt den med hjälp av CSS translate och gammaldags geometri. Här är skenformlerna jag kom fram till för varje bild i rutnätet:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Några beräkningar och optimering senare (låt oss hoppa över den tråkiga delen, eller hur?) får vi följande CSS:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Det kanske blir lättare när vi får det riktiga trigonometrifunktioner i CSS!
Varje bild är översatt av --_x och --_y variabler som är baserade på dessa formler. Bara den andra bilden (nth-child(2)) är odefinierad i valfri väljare eftersom det är den i mitten. Det kan vara vilken bild som helst om du väljer att använda en annan ordning. Här är ordningen jag använder:
Med bara några rader kod får vi ett coolt rutnät av bilder. Till detta lade jag till en liten svävningseffekt till bilderna för att göra saker snyggare.
Gissa vad? Vi kan få ett annat hexagon rutnät genom att helt enkelt uppdatera några värden.
Om du kontrollerar koden och jämför den med den föregående kommer du att märka att jag helt enkelt har bytt värdena inuti clip-path och jag bytte mellan --x och --y. Det är allt!
CSS Grid of Rhombuses
Rhombus är ett så fint ord för en kvadrat som är roterad 45 grader.
Samma HTML, minns du? Vi börjar först med att definiera ett 2×2 rutnät av bilder i CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Det första som kan fånga ditt öga är grid fast egendom. Det är ganska ovanligt men är väldigt användbart eftersom det är en stenografi som låter dig definiera ett komplett rutnät i en deklaration. Det är inte den mest intuitiva - och för att inte säga läsbara - egenskapen, men vi är här för att lära och Upptäck nya saker, så låt oss använda det istället för att skriva ut alla individuella rutnätsegenskaper.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Detta definierar två kolumner lika med --s variabel och ställer in höjden på alla rader till --s också. Eftersom vi har fyra bilder får vi automatiskt ett 2×2 rutnät.
Här är ett annat sätt vi kunde ha skrivit det:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…som kan reduceras med grid stenografi:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Efter att ha ställt in rutnätet roterar vi det och bilderna med CSS transforms och vi får detta:
Notera hur jag roterar dem båda med 45deg, men i motsatt riktning.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Att rotera bilderna i negativ riktning förhindrar att de roteras med rutnätet så att de förblir raka. Nu tillämpar vi en clip-path att klippa ut en rombform ur dem.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Vi är nästan klara! Vi måste korrigera storleken på bilden för att få dem att passa ihop. Annars är de så långt ifrån varandra att de inte ser ut som ett rutnät av bilder.
Bilden ligger inom gränsen för den gröna cirkeln, som är den inskrivna cirkeln i rutnätsområdet där bilden är placerad. Vad vi vill är att göra bilden större för att passa in i den röda cirkeln, som är den omskrivna cirkeln i rutnätsområdet.
Oroa dig inte, jag kommer inte att introducera någon mer tråkig geometri. Allt du behöver veta är att förhållandet mellan radien för varje cirkel är kvadratroten ur 2 (sqrt(2)). Detta är värdet vi behöver för att öka storleken på våra bilder för att fylla området. Vi kommer använda 100%*sqrt(2) = 141% och bli klar!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Liksom hexagonrutnätet kan vi göra saker snyggare med den här trevliga zoomningseffekten:
CSS-rutnät med triangulära former
Du vet förmodligen vid det här laget att det stora tricket är att ta reda på clip-path för att få de former vi vill ha. För detta rutnät har varje element sitt eget clip-path värde medan de två sista rutnäten fungerade med en konsekvent form. Så den här gången är det som att vi arbetar med några olika triangulära former som går samman för att bilda ett rektangulärt rutnät av bilder.
Vi placerar dem i ett 3×2 rutnät med följande CSS:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Här är vad vi får:
Sista handen är att göra bredden på mittkolumnen lika 0 för att bli av med mellanrummen mellan bilderna. Samma typ av mellanrumsproblem som vi hade med rombrutnätet, men med ett annat tillvägagångssätt för formerna vi använder:
grid-template-columns: auto 0 auto;Jag var tvungen att pilla med clip-path värden för att se till att de alla ser ut att passa ihop som ett pussel. Originalbilderna överlappar varandra när mittkolumnen har noll bredd, men efter att bilderna har skurits upp är illusionen perfekt:
CSS Pizza Paj Grid
Gissa vad? Vi kan få ett annat coolt rutnät genom att helt enkelt lägga till border-radius och overflow till våra rutnät eller triangulära former. 🎉
CSS-rutnät med pusselbitar
Den här gången ska vi spela med CSS mask egenskap för att få bilderna att se ut som pusselbitar.
Om du inte har använt mask med CSS-lutningar, Jag rekommenderar verkligen denna andra artikel Jag skrev om ämnet eftersom det kommer att hjälpa till med vad som kommer härnäst. Varför gradienter? För det är det vi använder för att få de runda skårorna i pusselbitsformerna.
Att sätta upp rutnätet borde vara enkelt vid det här laget, så låt oss istället fokusera på mask del.
Som illustreras i ovanstående demo behöver vi två gradienter för att skapa den slutliga formen. En gradient skapar en cirkel (den gröna delen) och den andra skapar den rätta kurvan samtidigt som den fyller i den övre delen.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Två variabler styr formen. De --g variabel är inget annat än rutnätsgapet. Vi måste ta hänsyn till gapet för att placera våra cirklar korrekt så att de överlappar varandra perfekt när hela pusslet är sammansatt. De --r variabel styr storleken på cirkulära delar av pusselformen.
Nu tar vi samma CSS och uppdaterar några värden i den för att skapa de tre andra formerna:
Vi har formerna, men inte de överlappande kanterna vi behöver för att få dem att passa ihop. Varje bild är begränsad till rutnätscellen den är i, så det är vettigt varför formerna är lite röriga just nu:
Vi behöver skapa ett bräddavlopp genom att öka höjden/bredden på bilderna. Från ovanstående figur måste vi öka höjden på den första och fjärde bilden medan vi ökar bredden på den andra och tredje. Du har förmodligen redan gissat att vi måste öka dem med hjälp av --r variabel.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Vi närmar oss!
Vi skapade överlappningen, men som standard överlappar våra bilder antingen till höger (om vi ökar bredden) eller botten (om vi ökar höjden). Men det är inte vad vi vill ha för den andra och fjärde bilden. Fixningen är att använda place-self: end på dessa två bilder och vår fullständiga kod blir denna:
Här är ett annat exempel där jag använder en konisk gradient istället för en radiell gradient. Detta ger oss triangulära pusselbitar samtidigt som vi behåller samma underliggande HTML och CSS.
En sista! Den här gången använder jag clip-path och eftersom det är en egenskap vi kan animera, får vi en cool hovring genom att helt enkelt uppdatera den anpassade egenskapen som styr formen.
Inslagning upp
Det var allt för den här första delen! Genom att kombinera de saker vi redan har lärt oss om CSS Grid med några tillagda clip-path och mask magi, vi kunde göra rutnätslayouter med olika typer av former. Och vi använde samma HTML-uppmärkning varje gång! Och själva uppmärkningen är inget annat än en behållare med en handfull bildelement!
I den andra delen kommer vi att utforska mer komplexa rutnät med mer snygga former och svävningseffekter.
Jag planerar att ta demon av expanderande bildpaneler som vi gjorde tillsammans i denna andra artikel:
…och förvandla den till en sicksackbildspanel! Och detta är bara ett exempel bland de många vi kommer att upptäcka i nästa artikel.
