Learning to Code: Day 30— Grid Part 3

Limit Item Sizes

If we want to limit the size of an item (a child element in a parent element;container) when it’s container grows larger, then we can add a minmax() function to do so.

grid-template-columns: 100px minmax(50px, 200px);-FreeCodeCamp

Create Flexible Layouts with Auto-Fill

When using the repeat() function, there is a handy auto-fill option to help fill out as many rows and columns as you need within a container. This means when the container expands, this option will automatically add more rows and columns to fill out the container space.

repeat(auto-fill, minmax(60px, 1fr));-FreeCodeCamp

Create Flexible Layouts with Auto-Fit

Okay, so we’ve got auto-fill, so what’s auto-fit? Where auto-fill adds empty rows or columns and pushes your items to one side, auto-fit takes those empty spaces and instead fills the current items into them, stretching them out.

repeat(auto-fit, minmax(60px, 1fr));-FreeCodeCamp

Using Media Queries to Create Responsive Layouts

We can use Media Queries to rearrange grid dimensions, areas and placement of items.

Gridception!

Let’s create grids within grids, cause why not right?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp