Rather than work through a specific question, this post is a collection of cool CSS tips and tricks I’ve learned through Wes Bos’s free CSS Grids course
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.
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: