Hogyan lehet a HTML-t reszponzivá tenni egyetlen CSS-sor hozzáadásával

Ebben a cikkben megtanítom, hogyan használhatja a CSS Rácsot egy nagyon jó képrács létrehozásához, amely az oszlopok számát a képernyő szélességével változik.

És a legszebb rész: az érzékenységet egyetlen CSS-sor egészíti ki.

Ez azt jelenti, nem kell rendetlenséget fel a HTML csúnya osztály nevét (azaz col-sm-4, col-md-8) vagy létrehozhat médialekérdezéseket minden egyes képernyő mérete.

Ha professzionális szinten szeretne megtanulni reagálóképes weboldalakat készíteni, fontolja meg a Scrimba adaptív webdesign bootcamp-jának megtekintését, mivel a hallgatók a kezdőtől a haladóig tartanak 15 óra interaktív oktatóanyagon keresztül.

Most ugorjunk bele!

A beállítás

Ebben a cikkben folytatjuk az első CSS Rács cikkemben használt rácsot. Ezután hozzáadjuk a képeket a cikk végén. Így néz ki a kezdeti rácsunk:

Itt van a HTML:

 1 2 3 4 5 6 

És a CSS:

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

Megjegyzés: A példában van egy kis alapstílus is, amelyre itt nem térek ki, mivel semmi köze a CSS Gridhez.

Ha ez a kód megzavarja, azt javaslom, olvassa el a CSS-rács 5 perc alatt című cikkemet, ahol elmagyarázom az elrendezés modul alapjait.

Kezdjük azzal, hogy az oszlopokat érzékennyé tesszük.

Alapvető érzékenység a frakcióegységgel

A CSS Grid egy teljesen új értéket hoz magával, úgynevezett törtrészegységet. A törtrészegység hasonlóan van írva fr, és lehetővé teszi, hogy a tárolót annyi frakcióra oszthassa, amennyit csak akar.

Változtassuk meg az oszlopokat úgy, hogy egy frakció szélességűek legyenek.

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

Itt az történik, hogy a rács a teljes szélességet három részre osztja, és az oszlopok mindegyike egy-egy egységet vesz fel. Itt az eredmény:

Ha megváltoztatjuk az grid-template-columnsértéket a következőre 1fr 2fr 1fr: a második oszlop most kétszer olyan széles lesz, mint a másik két oszlop. A teljes szélesség most négy frakcióegység, a második pedig kettőt vesz fel, míg a többiek egyenként. Így néz ki:

Más szavakkal, a törtrészegység értéke rendkívül egyszerűvé teszi az oszlopok szélességének megváltoztatását.

Haladó válaszkészség

A fenti példa azonban nem adja meg a kívánt reakciókészséget, mivel ez a rács mindig három oszlop széles lesz. Azt akarjuk, hogy a rácsunk az oszlopok számát a tároló szélességével változtassa. Ennek eléréséhez három új fogalmat kell megtanulnia.

ismétlés()

Kezdjük a repeat()függvénnyel. Ez hatékonyabb módszer az oszlopok és sorok megadására. Vegyük az eredeti rácsunkat, és állítsuk át ismétlés () használatára:

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

Más szavakkal, repeat(3, 100px)azonos a 100px 100px 100px. Az első paraméter megadta, hogy hány oszlopot vagy sort szeretne, a második pedig a szélességüket határozza meg, így ez pontosan ugyanazt az elrendezést adja meg nekünk, mint amivel kezdtük:

automatikus illesztés

Aztán ott van az automatikus illesztés. Ugrás a rögzített oszlopmennyiségre, és inkább a 3-at helyettesítsük auto-fit.

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

Ez a következő viselkedést eredményezi:

A rács az oszlopok számát a tároló szélességével változtatja.

Egyszerűen annyi 100 képpont széles oszlopot próbál beilleszteni a tartályba, amennyire csak lehetséges.

Ha azonban az összes oszlopot pontosan 100 képpontosra kódoljuk, soha nem kapjuk meg a kívánt rugalmasságot, mivel ritkán adják meg a teljes szélességet. Amint a fenti gif-en láthatja, a rács gyakran hagy üres helyet a jobb oldalon.

minimum maximum()

A végső összetevőt, amelyre szükségünk van ennek orvoslásához, ún minmax(). Egyszerűen kicseréljük a 100px-et minmax(100px, 1fr). Itt van a végső CSS.

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

Figyelje meg, hogy az összes válaszkészség a CSS egyetlen sorában történik.

Ez a következő viselkedést eredményezi:

És amint láthatja, ez tökéletesen működik. A minmax()függvény meghatározza a min- nél nagyobb vagy azzal egyenlő mérettartományt, és kisebb vagy egyenlő a 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

Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.

If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.