Share
Vad du ska skapaI denna handledning kommer jag att täcka grunderna i CSS-rutnätlayouten med exempel scenarier. CSS Grid stöds nu av nästan alla moderna webbläsare, och den är redo att användas i produktion. Till skillnad från andra layoutmetoder som flexbox, ger gridlayouten dig två grader av frihet, vilket gör den så mångsidig att positionering av elementen är bara en vind.
För att kunna använda CSS Grid-layouten måste HTML-elementen ha en specifik struktur.
Du måste pakka in de element som du vill styra inom en fördämningsbehållare DIV.
1234
Låt oss lägga till lite styling för våra DIV så att vi enkelt kan skilja dem.
Ställ också in display: rutnät i din omslag DIV så att vi kan börja använda rutnätlayouten.
.wrapper> div bakgrundsfärg: orange; gräns: 1px svart solid; .wrapper> div: nth-child (udda) bakgrundsfärg: indianred; .wrapper display: grid
Från och med den här tiden kommer all stilering att gå in i omslag DIV. Om vi någonsin vill kontrollera barnets DIVs när som helst kommer vi att lägga till nätspecifika stylingsregler för det specifika barnet DIV.
De första sakerna vi behöver veta om rutnätet är grid-template-kolonner och grid-template-rader. Dessa två regler styr i grunden hur ditt rutnät formas.
Värdet av dessa regler kan vara en längd, en procentandel eller en bråkdel av ledigt utrymme i rutnätet. Du kan också ange vilket värde som helst bil, som fyller upp återstående utrymme.
Låt oss se några exempel nedan.
.wrapper display: rutnät; rutnätmall-kolumner: 100px 100px 100px
.wrapper display: rutnät; gallermall-kolumner: 100px auto 100px
.wrapper display: rutnät; rutmall-kolumner: 1fr 1fr 1fr 1fr;
Låt oss börja bygga ett riktigt rutnät, där vi har kontroll över både kolumner och rader.
.wrapper display: rutnät; rutmall-kolumner: 1fr 1fr; raster-mall-rader: 50px 50px;
.wrapper display: rutnät; rutnätmall-kolumner: 100px 20px 250px; raster-mall-rader: 150px 40px;
Här har jag bara lagt till ytterligare två barns DIV till HTML för samma CSS.
Om du har ett upprepande mönster för grid-mall,du kan bara använda repetera och berätta hur många gånger du vill repetera samma mönster.
Säg att du har 12 element, och du vill lägga dem ut horisontellt med samma bredd. Du kan upprepa 1fr 12 gånger inuti grid-template-kolonner, vilket inte är effektivt. Så i stället kan du använda upprepa (12, 1fr).
.wrapper display: rutnät; rutnätmall-kolumner: upprepa (12, 1fr)
På samma sätt kan du upprepa ett mönster.
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr 5fr 10fr);
Denna regel hjälper dig att ställa in bredd och höjd på rutceller.
Om du inte anger denna regel kommer dina rader och kolumner att expandera med innehållet.
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr); raster-auto-rader: 100px;
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr); raster-auto-rader: 20px 80px;
En trevlig funktion att använda med grid-auto regel är min Max fungera.
Du ställer bara in minsta storlek som första parameter och maximalt som andra parameter. Om du ställer in bil För den andra parametern får du en responsiv cellstorlek.
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr); raster-auto-rader: minmax (50px, auto)
Nedan ser du två olika DIV-innehåll med samma CSS-regler.
Som namnet antyder skapar denna regel ett mellanrum mellan nätceller.
Om du använder gallergap: 5px, du får ett 5px mellanrum mellan varje cell. Alternativt kan du bara ställa in rad- eller kolumnhålen med rasteravstånd: 5px och rutnittspaltrum: 5px respektive.
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr); raster-auto-rader: minmax (50px, auto); gallergap: 5px;
Hittills har vi bara fokuserat på formen på rutnätet och objekt som bara flödade i rutnätet. Nu lär vi oss att styra varje enskilt objekt individuellt.
För att placera objekten använder vi rutnät som referens. Nedan ser du rad- och kolumnlinjerna i svart och orange för ett 2x4-nät.
Vi kommer att använda grid-kolonn och grid-rad reglerar med radnummer för att placera elementen.
Till exempel, om vi ställer in rutnät-kolumn: 1/3 För första barnet div kommer det att använda de två första cellerna i gallret.
Tänk på HTML och CSS nedan:
12345678
.wrapper display: rutnät; rutmall-kolumner: upprepa (4, 1fr); raster-auto-rader: 100px; gallergap: 5px;
Vi har fyra lika stora kolumner och åtta element i omslag DIV.
.div1 grid-column: 1/3;
.div1 grid-column: 1/3; rutnät: 1/3;
Du kan också kombinera dessa två regler i en enda regel, rutnätområde: rowStart / columnStart / rowEnd / columnEnd.
.div1 gallerområde: 2/2/3/4;
Såsom illustreras i ovanstående exempel är element ej bundna till HTML-strukturen. Lägg märke till hur det första elementet omplaceras med grid-område regel.
Du kan namnge varje barnelement och använda dessa namn för att skapa ditt rutnät. Det här är verkligen kraftfullt, och det gör layout mer intuitivt.
Så vi definierar en DIV för varje element vi planerar att placera i vårt nät system.
Jag planerar att ha en rubrik, vänster kolumn, höger kolumn, middleTop, middleBottom och en sidfot.
Så i min HTML behöver jag så många DIV-barn. Klassnamnen kan vara något.
RubrikLeftColRightColmidTopmidBottomsidfot
Därefter ställde jag in min CSS i grid-område namn. De namnen kan vara någonting; De ska inte matcha klassnamnen.
.rubrik rutnätområde: rubrik; bakgrundsfärg: LightSeaGreen; .leftCol rutnätområde: leftCol; bakgrundsfärg: orange; .RightCol rutnätområde: rightCol; bakgrundsfärg: ljusblå; .midTop rutnätområde: midTop; bakgrundsfärg: ljusgrå; .midBottom grid-area: midBottom; bakgrundsfärg: rosa; .footer grid-area: footer; bakgrundsfärg: ljusgrön;
Sedan inuti min omslag DIV, jag använder grid-template-områden regel att utarbeta dessa element genom att hänvisa till deras definierade namn.
Observera att jag har ett 4x4-nät.
.wrapper display: rutnät; rutmall-kolumner: 1fr 4fr 4fr 1fr; raster-mall-rader: 50px 100px 100px 30px; rutnätmallområden: "rubrikhuvudhuvudhuvud" "vänsterKol midTop midTop rightCol" "vänsterKol midBottom midBottom rightCol" "sidfotfots footer footer"; gallergap: 5px;
Om jag till exempel vill att sidfoten tar bara två kolumner och centreras, ersätter jag helt enkelt det första och det sista utseendet på sidfot med en punkt (.) i grid-template-områden.
.wrapper display: rutnät; rutmall-kolumner: 1fr 4fr 4fr 1fr; raster-mall-rader: 50px 100px 100px 30px; rutnätmallområden: "rubrikhuvudhuvudhuvud" "vänsterKol midTop midTop rightCol" "vänsterKol midBottom midBottom rightCol" ". footer footer."; gallergap: 5px;
CSS Grid har många regler, och jag täckte bara de mest användbara i denna handledning. Du kan fortfarande gräva i MDN Web Docs eller andra källor för en fullständig lista över rutnätegenskaper och funktioner.
Accentsconagua