CSS Deep Dive: the Power of Grid

If you've done some CSS before, you know how much of a pain it is to place things just so... You've tried all the tricks, you've done all the math, and yet you can never get your layout exactly the way you were envisioning on paper... or you could but you had to try a million combinations or write what felt like a million lines of code. You are a wizard and CSS is magic... let Grid become your wand of supple wood with a phoenix core, and harness that power! Grid allows you to place things horizontally, vertically anywhere and everywhere, however you like, whenever you like. Want to move your footer in the middle of the page when your screen is between 800px and 1200px wide without using javascript ? You can! Want to have everything divided into 12 exact columns without worrying about margins and paddings and making mad calculations? You can! Want a grid within a grid within a grid? You can! This class is for made for the CSS enthusiast, or the downright frustrated CSS user who just would like to kill floats with fire. Intermediate understanding of CSS is expected to follow this class comfortably. If you do not know CSS, or haven't worked with it in a while, we suggest taking our Create a Website: Styling and Create a Website: Layout classes beforehand.

Instructor:
Sandra Bermond | Innovation Co-Lab Program Manager
Sandra manages the Innovation Co-Lab roots program as well as teaches several workshops. She has a background in web design and front-end development, as well as a passion for artistic endeavors regardless of the medium.

  • CSS
  • Web Development

About Course

Outline

  • What is Grid?
  • Usage and Limitations
  • The Power of Grid
  • How to Use Grid
  • Implementation of Grid in a simple Website

Objectives

  • Have knowledge of Grid and its abilities
  • Add a grid to a website
  • Make changes to an existing Grid
  • Know where to look for help

Tools

Install a code editor such as notepad++, atom, visual studio, sublime or more. Make sure you have access to Chrome or Firefox.

Files

Prerequisites

To fully follow this course we recommend that you come with an intermediate understanding of CSS. If you haven't worked with CSS in a while or ever, you may want to do one of the following: Attend Create a Website: Styling and possibly, Create a Website: Layouts OR Watch CSS for Beginners

Examples

grid-example grid-example grid-example

This class is part of our Web Development (Front End) Track

See the whole track

Suggested Courses

Course Graphic

Create a Website: Structure (Intro to HTML)

In this class, you will learn the basics of HTML, the content language of the web. We will explore HTML usage, its syntax and best practices when it comes to HTML file setups. We will also look into key features of HTML such as relationships between elements, the box model and specificities (classes, ids, attributes).

Learn More
Course Graphic

Create a Website: Styling (Intro to CSS)

In this class, you will learn the basics of CSS, the styling language of the web. We will explore CSS usage, its syntax and best practices when it comes to CSS file setups. We will also look into key features of CSS such as the cascading model, and the specificity model.

Learn More
Course Graphic

Create a Website: Interactivity with Javascript

In this workshop, we'll take the website you've been working on throughout the 'Create a Website' courses, and add dynamic features like sorting, hiding/showing displays, and image manipulation to turn your static pages into living documents.

Learn More
Course Graphic

Create a Website: Layouts (Responsive CSS)

In this class we will fine tune some of the previous CSS rules we worked as well as learn brand new things to create more complex and overall better layouts that can be experienced comfortably from any device.

Learn More