SIMPLE CSS GRID RESPONSIVE HOW TO

Keeping mobile first in mind, weвЂ™ll need a media query to toggle our selectors based on the min-width of the screen.Д«elow is a psuedo-code example of how the core structure our html and css will look. You could also use px or % for your columns, but using fr helps with consistent spacing.ДЇor larger viewports weвЂ™ll want 4 columns, so weвЂ™ll use grid-template-columns: repeat(4, 1fr). The fr stands for вЂњfractal unitвЂќ, which means that it will take up the available space in the container. For small viewports we want two columns, so weвЂ™ll use grid-template-columns: repeat(2, 1fr), which is equivalent to grid-template-columns: 1fr 1fr. Once we have the container defined as grid layout via display: grid, we can define how many columns we want to use for each screen size. All children of the Grid_Container element automatically become grid items (columns or rows).ДЄdding the display: grid property will have no effect until we define how many columns or rows we want and what size they should be. The Grid_Container selector is where we declare that we will be using grid via display: grid. The child elements are all the same, with the exception of the 5th element which we want to span the length of the elements above it. For the html we basically just have a grid container that has 5 child elements that are each grid columns. The html and css for both of these is pretty straightforward for the most part. Here is a template of how the footer will look on larger viewports (sorry mobile readers): The вЂњrowвЂќ at the bottom will contain some company info and links to social media accounts. If you have a longer link or content text in your columns then you might consider a single column as a better option.ДЇor the content itself, each grid column will contain a set of links for your product that are probably similar to what youвЂ™d have in a header or navigation menu. I initially went with 1 column but I felt like there was a lot of unused space on the right, so I went with the 2 column layout for mobile which seems to fit a little better. The smaller viewport version of the footer will still contain 4 columns but they will only be 2 columns wide. Also, grid allows you to define how many columns you want another column to span, so it sort of lends itself to using the column this way.

IвЂ™m certain there is a way, but I didnвЂ™t want to spend a ton of time on it and this version seems to work just fine.

SIMPLE CSS GRID RESPONSIVE HOW TO

The reason I did it this way is because I didnвЂ™t know how to implement a row inside of the grid containter that I have already defined to have columns. I put вЂњrowвЂќ in quotes here because the row is really a column that will span the entire width of the 4 columns above it. The basic template for our footer on larger viewports will be a 4 column grid with a вЂњrowвЂќ underneath the columns. The plan is to have our footer be responsive. But confusing syntax might mean that it is more flexible? I guess IвЂ™m still deciding. Using grid is fine for the most part but I find the syntax a little more confusing.

IвЂ™ve definitely used flexbox for larger scale layouts and it seemed to work fine and wasnвЂ™t too complicated, so I guess the jury is still out for me on which to use and when. IвЂ™ve read in a few places that grid should be used for larger scale layouts (like header, sidenav, content, footer, etc) and flexbox should be used more for alignment purposes. I am still a little grey on when to use flexbox and when to use grid. I havenвЂ™t done much with css grid up until this point, so I thought a footer section might be a good candidate for using it since footers are often multiple columns of links and what not. So, here is a walkthrough of building a simple responsive footer with CSS grid and a little bit of flexbox.

Simple css grid responsive