Sådan får du din HTML lydhør ved at tilføje en enkelt linje med CSS

I denne artikel lærer jeg dig, hvordan du bruger CSS Grid til at oprette et supercoolt billedgitter, der varierer antallet af kolonner med skærmens bredde.

Og den smukkeste del: lydhørhed tilføjes med en enkelt CSS-linje.

Det betyder at vi ikke behøver at fylder HTML med grimme klassenavne (dvs. col-sm-4, col-md-8) eller oprette medier forespørgsler for hver enkelt skærmstørrelse.

Hvis du vil lære at opbygge responsive websteder på et professionelt niveau, kan du overveje at tjekke Scrimbas responsive webdesign bootcamp, da det tager studerende fra begynder til avanceret gennem 15 timers interaktive tutorials.

Lad os nu springe ind i det!

Opsætningen

Til denne artikel fortsætter vi med det gitter, vi brugte i min første CSS Grid-artikel. Derefter tilføjer vi billederne i slutningen af ​​artiklen. Sådan ser vores oprindelige gitter ud:

Her er HTML:

 1 2 3 4 5 6 

Og CSS:

.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } 

Bemærk: eksemplet har også en lille smule grundlæggende styling, som jeg ikke går ind på her, da det ikke har noget at gøre med CSS Grid.

Hvis denne kode forvirrer dig, vil jeg anbefale dig at læse min Learn CSS Grid-artikel på 5 minutter, hvor jeg forklarer det grundlæggende i layoutmodulet.

Lad os starte med at gøre kolonnerne lydhøre.

Grundlæggende lydhørhed med fraktionsenheden

CSS Grid bringer med sig en helt ny værdi kaldet en brøkdel. Brøkdelen er skrevet som fr, og det giver dig mulighed for at opdele containeren i så mange brøker, som du vil.

Lad os ændre hver af kolonnerne til at være en brøkdel bred.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; } 

Hvad der sker her er, at gitteret opdeler hele bredden i tre fraktioner, og hver af kolonnerne optager en enhed hver. Her er resultatet:

Hvis vi ændrer grid-template-columnsværdien til 1fr 2fr 1fr, vil den anden kolonne nu være dobbelt så bred som de to andre kolonner. Den samlede bredde er nu fire fraktionsenheder, og den anden optager to af dem, mens de andre tager en hver. Sådan ser det ud:

Med andre ord gør fraktionsenhedsværdien det super nemt for dig at ændre kolonnernes bredde.

Avanceret lydhørhed

Imidlertid giver eksemplet ovenfor os ikke den lydhørhed, vi ønsker, da dette gitter altid vil være tre kolonner bredt. Vi ønsker, at vores gitter varierer antallet af kolonner med containerens bredde. For at opnå dette skal du lære tre nye koncepter.

gentage()

Vi starter med repeat()funktionen. Dette er en mere kraftfuld måde at specificere dine kolonner og rækker på. Lad os tage vores originale gitter og ændre det til at bruge repeat ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } 

Med andre ord, repeat(3, 100px)er identisk med 100px 100px 100px. Den første parameter specificerede, hvor mange kolonner eller rækker du vil have, og den anden angiver deres bredde, så dette giver os nøjagtigt det samme layout, som vi startede med:

automatisk tilpasning

Så er der automatisk tilpasning. Lad os springe over at have en fast mængde kolonner og erstatte 3 med auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } 

Dette resulterer i følgende adfærd:

Gitteret varierer nu antallet af kolonner med bredden på containeren.

Det forsøger simpelthen at passe så mange 100 px brede søjler ind i containeren som muligt.

Men hvis vi hårdt kode alle kolonner til at være nøjagtigt 100 pixel, får vi aldrig den fleksibilitet, vi ønsker, da de sjældent tilføjer op til den fulde bredde. Som du kan se på gifen ovenfor, efterlader gitteret ofte hvidt rum på højre side.

minmax ()

Den sidste ingrediens, vi har brug for for at løse dette, kaldes minmax(). Vi erstatter simpelthen 100 pixel med minmax(100px, 1fr). Her er den sidste CSS.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } 

Bemærk, at al lydhørhed sker i en enkelt CSS-linje.

Dette resulterer i følgende adfærd:

Og som du kan se, fungerer det perfekt. Den minmax()Funktionen definerer et størrelsesområde er større end eller lig med min og mindre end eller lig med max.

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

Adding the images

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

We’ll start off by adding an image tag inside of each of the grid items.

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

.container > div > img { width: 100%; height: 100%; object-fit: cover; } 

Which ends up like the following:

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

Browser support

Før vi slutter, skal jeg også nævne browsersupport. På tidspunktet for denne artikels skrivning understøtter 93% af den globale websitetrafik CSS Grid, og det klatrer. Det bliver mere og mere klart, at Grid bliver til en must-have-færdighed for front-end-udviklere. Meget ligesom hvad der er sket med CSS Flexbox for et par år siden.

Hvis du vil lære Flexbox, Grid og responsivt design en gang for alle, skal du tjekke det responsive webdesign bootcamp på Scrimba. Det tager din begynder til avanceret gennem interaktive tutorials, der er nemme at følge.

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba, en interaktiv læringsplatform til at lære at kode.