gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
73d104d78ffcc6dea00d69d0ac75d88d5b8b2016
freeCodeCamp/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md
Randell Dawson 1494a50123 fix(guide): restructure curriculum guide articles (#36501) 
* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions
2019-07-24 13:29:27 +05:30

939 B
Raw Blame History

title
title
Create Flexible Layouts Using auto-fill

Create Flexible Layouts Using auto-fill

Problem Explanation

This challenge will expound upon the previous challenge by adding the auto-fill value to the repeat function. This will cause the number of divs to expand based on the viewport's size rather than the previously specified column value. In the Before section below, the grid-template-column value "3" is specified.

Keep in mind that the following code snippets are only examples and not the exact challege from freeCodeCamp's curriculum.

Before

grid-template-columns: repeat(3, minmax(50px, 2fr));

After

grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));

Relevant Links

You may refer to the Syntax portion of the following page to see the auto-fill value: Mozilla Developer Network