![]() 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. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |