Gap CSS
I denne opplæringen vil vi bruke denne "Grid-Gap" -egenskapen i CSS og vil forklare deg "Grid-Gap" -konseptet i detalj sammen med forskjellige eksempler.
Eksempel nr. 1:
Vi begynner med vårt første eksempel ved å lage en ny fil i programvaren, Visual Studio Code. Når vi oppretter en ny fil i Visual Studio Code, kan vi velge språket og vi velger HTML. HTML -koden må da opprettes. Visual Studio Code lar oss øyeblikkelig skaffe de grunnleggende kodene ved å legge inn “!”Og klikk deretter“ Skriv inn.”Så vi drar nytte av denne muligheten og samler alle disse grunnleggende taggene. I HTML Head -taggen gir vi en lenke til CSS -filen. Vi skal lage en overskrift og deretter legge et avsnitt under denne overskriften. Deretter lager vi en hoveddiv-klasse med navnet “Grid-Container” og setter syv andre divklasser i denne viktigste diven. Vi gir forskjellige navn til alle divene som “item1” for div klasse 1, “item” for div klasse 2, og så videre.
Vi bruker "tekst-align" -egenskapen for "kroppen" og justerer den til "senteret". Deretter velger vi "grønt" som overskriften "farge" og legger også "understreken" for "tekstdekorasjon" -egenskapen. Familien til skriften er “Algerie”. Avsnittets "font-family" er "Times New Roman". "Fontvekt" er "fet" og "maroon" "fargen". "Font-size" vi setter her er "20px" for avsnittet og også "kursiv" avsnittet.
Nå skal vi sette den viktigste diven som heter “Grid-Container”. For dette er "displayet" vi bruker "rutenettet". Deretter har vi egenskapen "Grid-Template-Column" som brukes til å spesifisere antall kolonner inne i et rutenett. Vi legger "auto auto auto" som verdien av denne egenskapen, noe som betyr at kolonnens størrelse er satt i henhold til beholderens størrelse. Her har vi tre kolonner i dette nettoppsettet.
Nå setter vi "nettkolonner-gap" og "rutenett-rad-gap" hver for seg. "Grid-kolonne-gapet" vi setter er "40px" og "Grid-Row-gap" er "20px". "Bakgrunnsfargen" av Main Div Container er "oransje", og polstringen vi bruker her er "10px". Denne padding -egenskapen brukes til å generere plassen rundt innholdet.
Nå skal vi sette "div" av "rutenettet. container ”som representerer alle divene som er til stede inne i hoveddiven. Vi setter "bakgrunnsfargen" til divene til "hvit", og teksten som er skrevet inni disse er på linje i "senteret". Etter alle disse har vi "polstring" -egenskapen der vi setter topp- og bunnpolstringen til "20px" og venstre, høyre polstring er "0". Størrelsen på skriften som er skrevet i disse divene er satt til “30px”. Nå, se på output -skjermbildet under denne koden.
Her er gapet eller rommet mellom radene "20px" og rommet mellom søylene er "40px" i det gitte skjermbildet.
Eksempel 2:
I dette eksemplet har vi åtte divs inne i hoveddiven “Grid-Container”. Vi vil bruke egenskapen "Grid-Gap" på denne koden som er Shorthand-egenskapen på "Grid-Column-Gap" og "Grid-Row-Gap". Vi vil sette både kolonnegapet og radgapet inne i denne ene "Grid-Gap" -egenskapen.
Vi bruker "fargen" på overskriften som "oransje" og "tekstdekorasjon" er satt her for å "understreke". Også "font-familiens" er "algerisk". Deretter setter vi "rutenettet" for "Display" -egenskapen og i "netttemplate-kolonnen" bruker vi fire "auto", så vi får fire kolonner i utgangen.
Etter dette har vi egenskapen "Grid-Gap" der vi setter størrelsen på plassen i "%" for kolonnene og radene på nettet. Vi setter den til “5%”, så det vil skape plass på “5%” mellom kolonnene og “5%” mellom radene. Vi bruker "bakgrunnsfargen" til "lysskifer-grå" og "polstring" er "10px" for dette "rutenettet. Ontainer ”. Vi bruker "bakgrunnsfargen" på de andre divene i “RGBA (122, 240, 122, 0.8), som er "lysgrønn" og også, vi har en "0.8 ”alfaverdi, så det viser litt åpenhet.
Vi justerer teksten i "sentrum" og "polstring" for "toppen" og "bunnen" er "20px" og "0" er for "venstre" og "høyre" polstring. "Font-size" er "30px" i denne koden.
I det gitte skjermbildet er det fire kolonner og mellomrommet mellom radene og kolonnene er "5%", ettersom vi har satt dette i egenskapen "Grid-Gap".
Eksempel nr. 3:
Her har vi tolv div i dette eksemplet, og vi vil bruke egenskapen "Grid-Gap" på disse. Vi vil også sette verdien av denne "Grid-Gap" -egenskapen i "PX" i CSS-koden.
For "kroppen" bruker vi "tekst-align" attributtet og fikser den til "sentrum". "Font-stilen" er "kursiv". Deretter legger vi til "rutenettet" -verdien for egenskapen "Display". Vi bruker fire “Auto” i egenskapen “Grid-Template-Column” for å få fire kolonner i utgangen. Etter det har vi egenskapen "Grid-Gap", som lar oss spesifisere størrelsen på plassen i "Pixel" for nettets kolonner og rader. Vi setter den til “50px”, noe som betyr at det vil være “50px” av mellomrom mellom søylene og “50px” mellom radene. "Bakgrunnsfargen" er satt til "rosa". Vi skaper også en "grense" for denne hoveddiven som er satt til "1px solid svart".
Her har vi "10px" av "polstring". Nå setter vi "bakgrunnsfargen" til de indre divene i "RGBA" -format og setter den til "RGBA (204, 90, 90, 0.8) ”som viser åpenhet for denne fargen. Gjennomsiktighetsverdien her er “0.8 ”. "Padding", "fontstørrelsen" og "font-family" er den samme som vi har brukt i eksemplene ovenfor.
Dette viser at vi har fire kolonner i utgangen, og også rommet mellom radene på rutenettet og kolonnene i rutenettet er "50px" her.
Konklusjon
Målet med denne opplæringen er å hjelpe deg med å forstå hvordan du bruker CSS “Grid-Gap” -egenskaper. I denne opplæringen har vi sett på CSS “Grid-Gap” -egenskaper og beskrevet hva “Grip-Gap” -egenskapen betyr, hvorfor vi bruker denne egenskapen, hvordan du bruker dette og hvordan den returnerer utdataene. Bruken av "Grid-Gap" har allerede blitt diskutert her. Vi har forklart denne egenskapen som vi brukte for å sette størrelsen på rommet mellom radene og kolonnene i rutenettet. Vi har også vist eksempler på hvordan du bruker egenskapen “Grid-Gap”, samt resultatene av alle eksemplene i denne opplæringen.