From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Rewrite CSS to integrate gaps between grid cells

Rewrite CSS to integrate gaps between grid cells - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Rewrite CSS to integrate gaps between grid cells

“

- [Instructor] Now that we have the initial layout scoped for our prototype and it's working, everything is good, now we need to add that gap in between each cell, so let's just start to think about this particular problem. We have a number here called columns. That's how many columns we have in our layout. We know there's four columns, four columns all the time, and each one of these cells that we're looking at here, we give them a width, which is how many columns they occupy, so each of the widths here is one column. These are two columns and so forth. Now, lets think about the gaps. Well, in a row like this where I have four cells, how many gaps do I have? Remember we're using the justify content of space between, so we shove the first cell all the way to the left, the last cell all the way to the right, we distribute the space evenly in between. How many gaps do we have? Well, in a row of four like that, we have three…

Contents