CSS Tips - Notes from CSS Grids

COLORS

I spend a lot of time thoughtfully choosing color pallets, then spend an embarrassing amount of time figuring out what those HEX codes I picked out actually are. The first tip that blew my mind was that we can assign HEX codes to default color names that we want to use repeatedly in our main.css under :root, then access those colors by name in our html!

For instance we can specify hex codes for yellow and black

:root {
  --yellow: #ffc600;
  --black: #272727;
}

Then specify those hex codes within our html using var(--<color>)

<style>
p {
    color: var(--black);
}
</style>

With this nifty trick we don’t have to memorize or track down HEX codes, using familiar color names instead.

Border Box

When setting a div’s border, if that div is inside a container you’ll want the border to scale to its container’s size. By using border-box, rather than adding a border to a div, you’re telling the browser to account for the border and padding within the div’s total size.

INHERIT

You can use border-boxes as above, but best practices add this inheritance snippet:

*, *:before, *:after {
  box-sizing: inherit;
}

WHY?

Because this allows for universal box resetting without worrying about the browser’s universal selector overriding your CSS.

Taking the internet’s word for it on that one…

GRIDDYUP

We can use grids to dice an element into columns and rows (“tracks”), then use those tracks to position our items.

By using grids, we make take the direct children of a container (items), and lay them out on a grid.

Let’s create a container with 10 child divs inside

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

We can specify a grid display on the container then slice it into columns by defining the column size. Here we create three columns all of equal size using grid-template-columns (100px), for a total div width of 300px. We can also define the space between our grid tracks using grid-gap

<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px
    grid-gap: 20px
  }
</style>

We can specify row width using grid-template-rows which defaults to a single column. Specifying both grid-template-rows and grid-template-columns is what gives us a grid.

<style>
  .container {
    display: grid
    grid-template-columns: 200px 500px
    grid-template-rows: 200px 500px 50px
    grid-gap: 20px
  }
</style>

If you want to keep some columns locks and allow others to rescale, you can specify auto rather than a number – I used this sweet feature within the second column below: