Grid Iron Css

As a continuation of last weeks blog post on CSS fundamentals I studied at freecodecamp.org, CSS is quite impressive when you take the time to learn the multiple layers that can go into it. One such layer is CSS Grid or the CSS grid layout. It is very efficient at chopping up a web page into different regions based on what the author prefers. If you would like a section for ad space running peripheral to the header, main and footer. With a few lines of code you can accomplish this. Grid is very user friendly in that you can specifically define the column rows/widths, heights & even if you would like certain aspects to repeat multiple times.

Starting with setting the display to grid in the container element, you now have the ability to call multiple properties such as grid-template-columns / rows and begin customizing the alignment of each. Grid gap? No problem you can adjust that as well as the amount of columns and rows that you prefer as seen below.

There are even short hand syntax for the above column & row designation. Using the repeat() function we can manipulate the css to:

grid-template-columns: repeat(3, 1fr) ;

grid-template-rows: repeat(3, 1fr);

And further changed the code to utilize repeats & minmax functions will have it adjust with the window being increased or decreased like so:

Finally CSS grid can be used to turn grids and the container’s within them into grid’s as well. Here we have set the grid-template-areas as follows:

grid-template-areas:

“advert header”

“advert content”

“advert footer”;

And created this separation of containers. To add another grid inside of this grid and separate paragraphs 1 & 2 horizontally, all we have to do now is go into the light blue element & add a display property of “grid” and dictate the columns there like so:

And there we have it. The grid within a grid ability within CSS Grids!