El Noguer

Joaquim Perez i Noguer

Filed under: Web — Joaquim Perez Noguer at 3:19 pm on Dijous, Desembre 14, 2017

Vist a https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431

The final ingredient we need in order to fix this is called minmax(). We’ll simply replace 100px with minmax(100px, 1fr). Here’s the final CSS.

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

Notice that all the responsiveness happens in a single line of CSS.

This results in the following behavior:

And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.

So the columns will now always be at least 100px. However if there are 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.


No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>