Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Paul Murphy
Paul Murphy
6,162 Points
Posted by Paul Murphy
Paul Murphy
6,162 Points

Box model Vs Grid Layout

Hi Guys, just need a bit of clarification before I begin building my first website for my company.

There are two main ways of building the style and layout of site firslty:

Box Model:

Whereby you have a main containing <div> with further <div's> inside that container using padding, margin and other styling methods to in effect plot where I want elements to appear on the page.

Grid Model:

Using a predefined column layout based on what your specific needs are you then add classes to your html then using your css you style the columns/grid accordingly.

Have I completely missed the boat or am I on the right track?

Any feedback is highly appreciated.

1 Answer

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Very Short Answer: A CSS Grid is created using the width & margin properties which are part of the box model

Short Answer: A CSS Grid is created by dividing the screen into a series of equally-wide columns and then creating this in CSS using divs, working out the math for the width of these divs finally adding in some margin to create the space between the columns.

Long Answer:

The Box Model

Essentially everything element on the screen is a rectangular box and it has 4 fundamental properties that relate to positioning.

Working from inside out:

  1. The our content w/ it's demensions
  2. Padding - makes element look bigger
  3. Border (if any)
  4. Margins - pushes an element away from other elements on the page (most elements have some default margin)

The box model is a rhetorical concept to explain the way margin, padding and borders interact to result in how an element is positioned when rendered on the screen.

Here are a few resources to help you understand CSS positioning a little better.

What's a grid?

A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

The goal of a grid is to provide order and structure which makes look "put together" and is therefore easier to read and understand. A CSS grid system works similarly to a grid layout of a magazine design the layout of the magazine once so you don't have to design every page from scratch.

A CSS grid is created by dividing the page into collection of columns. This is done in CSS by working out the math to assign widths to a series of divs, and then creating the gutter's between the columns by using adding margin to the divs. That's how the very simple grid that's used in the Smells Like Bakin project works.