Introduction
Grids are another extension of the design world. There’s just something much more pleasing about navigating through a site that properly uses a grid to lay out the content than one which has ignored all the C.R.A.P principles and put things in place willy-nilly.
In this section, you’ll get a look at how to use CSS to lay out the elements of your page using a grid.
Learning Objectives
- Why are grids effective for helping site layout?
- What are the major different types of grids in use today?
- How could you design your own grid (on paper)?
- How can you implement your own grid in CSS?
Study
-
Read through the Responsive Grid with Media Queries Tutorial from TutsPlus. You don’t need to actually build it, but feel free to.
-
Glance through Unsemantic, which is a fluid grid system which can be really useful for building layouts. They have demos that you can take a look at. Just look through the site; we’ll be covering the Bootstrap and Foundation grid systems later.
Additional Resources
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
- Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
- Is it urgent? Did you try reaching him on Slack