grid overview

February 19, 2024 Reading time: 4 minutes

Two steps are required when it comes to building grid designs:

  1. slice a container into... a grid
  2. fill the cells or area of cells with elements

Imagine we work with following code:

<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

The corresponding CodePen is of course available.


First, we need our container to display its content as a grid : #container { display: grid; }. After that we need to slice down the container. There's two ways to do that:

Classic way

#container {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;

Here we'll have a grid of 2 columns and 2 rows.

By name

#container {
display: grid;
grid-gap: 1em;
"div1 div2"

"div3 div4"

Same here but we use names. In both cases we set up a gap, which is the space between the child element of the container.


Classic way

#div1 {
grid-column: 1;
grid-row: 1;


div1 will go in first column and first row.

By name

#div1 {
grid-area: div1;

Here we declare the element's name. As div1 was the first name on the first line, #div1 element will go on first column and first row.

Units and functions

For the slicing part, we can use different units, exclusively or in a combination, such as:

  • fraction (fr) - the browser divides the screen with the all fractions that were specified
  • relative units: %, vw, vh, auto...
  • fixed units: px
  • keywords: min or max-content, auto

We can also use functions, exclusively or in combination, such as:

  • repeat(nbOfTimes, unit)
  • minmax(minSize, maxSize)


For the filling part, we can set up precise coordinates which will be a line or a column line number with the syntax from / to

For instance, if our first div was supposed to fill the entire first line, we could write:

#div1 {
grid-column: 1 / 3;
grid-row: 1;


Where we are telling the brower to extend #div1 on column 1 and 2 (column 1 is between number 1 and 2 and column 2 between number 2 and 3).

CSS selectors

February 11, 2024 Reading time: 4 minutes

Target the right element is a must-know. Here's a recap of the available options. Examples are for the following structure:

<h2>Some title</h2>
<p>A paragraph</p>
<p>I am child of div</p>
<p>The guy up there is my bro.</p>
<p>Lonely paragraph</p>
<p>Third brother.</p>
<p>Out of div</p>

As always, a demo is available on CodePen.


Target a list of elements

Separate the elements with a ,.

h2, section {
font-weight: bolder;
color: navy;

Target all descendants of an element

Separate the parent element from the descendant element with a space.

div p {
text-decoration: underline;

Target all children of an element

Separate the parent element from the child element with a >.

body > p {
font-family: monospace;

Target the next sibling

Separate the first bro element from the second with a +.

div + p {
text-align: center;

Target all next siblings

Separate the first bro element from the other ones ~.

div ~ p {
width: 20%;
padding: 0.5em;
border: 0.25em solid indianred;

Pseudo-class selectors

A full list can be found on MDN Web Docs.

Target all first child from a parent element

Use a pseudo class after the element's name you want to target:

p:first-child {
letter-spacing: 0.25em;

Target every x element of a type from a parent

p:nth-of-type(3n) {
color: blue;


Locate a starting point then create inline elements or specific decoration. For instance:

h2::before {
content: "♥ ";

h2::selection {
background-color: gold;

Attribute selectors

There's no attribute in the demo page. See attribute selectors

Bootstrap at a glance

July 28, 2023 Reading time: 10 minutes


A free CSS framework to work with when time supply is running low.

Version 3 is the most stable version, supported by all modern browsers.


Bootstrap is a combination of pre-written CSS and JavaScript (jQuery) files, both available from a CDN. To access it, add reference to head element:

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>


Some code snippets are available on my dedicated CodePen

Basic structure

A section needs a container class

Encapsulate your section into a container class which can be either:

  • container (fixed width container) OR
  • container-fluid (full width container)

A section is 12 columns-wide

Group elements in a row with row class then distribute included elements into columns per screen size with col-screenSize-numberOfColumns class. An additionnal well class would add grey background color and rounded border to the zone.

size would be:

  • xs for phones - screens less than 768px wide / extra-small
  • sm for tablets - screens equal to or greater than 768px wide / small
  • md for small laptops - screens equal to or greater than 992px wide / medium
  • lg for laptops and desktops - screens equal to or greater than 1200px wide / large

numberOfColumns is a number between 1 and 12. A row should have a total of 12 colums for each screenSize.

For instance, if we want to align 3 buttons in a row, it means 1 button should be 4 colums wide (3 * 4 = 12).

<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4 well">
<div class="col-xs-4 col-md-4 col-lg-4 well">
<div class="col-xs-4 col-md-4 col-lg-4 well">


Add a static navbar to the top of the page with your website's name, dropdowns, collapsable for small screens, align sign in button to the right and so on. Have a look on CodePen.

Basic classes

Contextual Colors and Backgrounds

Classes for colors are:

  • element-muted
  • element-primary
  • element-success
  • element-info
  • element-warning
  • element-danger

element could be text, bg, alert, btn

Image and image gallery

Some useful class for img element:

  • img-thumbnail: adds some rounded borders and padding
  • img-responsive: applies display: block, max-width: 100% and height: auto.

To create a gallery, combine thumbnail class with Bootstrap grid system:

  • create an element with container class
  • within the container, create as many elements with row class as you need
  • within each row, divide the space into as many colums as you need (col-screenSize-numberOfColumns)
  • within each colum, apply thumbnail class to a wrapper element such as figure that will contain a link to the image source full size that will itself contain
    • the image element
    • a figcaption element

Create an 'alert' element

Show the user some confirmation or alert message within an element, such as a div. Apply alert class to an element in addition with a alert-contextualColor class (see above) and alert-dismissible class to allow user to remove the element. Removal can be smoothened with fade and in classes. For instance:

<div class="alert alert-success alert-dismissible fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.

Customize button, a, input

Basic classes to apply on a button, a or input elements are:

  • btn and
  • btn-default (display as wide as the text it contains) OR
  • btn-block (as wide as 100% of the available width (breaks on a new line))

Then add if needed:

  • color: btn-contextualColor
  • size: btn-size

a & button groups

A collection of share links can typically be grouped on a single line with btn-group or btn-group-vertical (+ -size if needed) applied on wrapper element.

Are you inline or block?

January 20, 2023 Reading time: 5 minutes

Again, this article has to do with understanding default display value before attempting changes. An HTML element could be either inline or block.

Inline element

  • Takes up content's width
  • Cannot contain a block element

Most used inline elements: a, img, br, span, input, label

Often used inline elements: button, code, em, strong, textarea, select

Block element

  • Starts on a new line and takes up full width of their parent element
  • Browser adds default margin

Most used block elements:

  • semantical structure (header, nav, main, section, article, p, aside, footer) + div
  • table (table, tfoot)
  • lists (ul, li, ol)
  • form (form, fieldset)
  • heading (h1 to h6)

Change default display

Diplay can be decomposed in two directions: outer (element's participation in flow layout) and inner (sets layout of children).

Use display property and set it to block or inline - this defines outer direction

Depending on your intent, you may also want to consider using flex value to manage the inner direction

Note that you can use precomposed values containing both outer and then inner instructions such as inline-flex or inline-block.

Zoom on inline-block

Using inline-block you can transform a block element into an inline element, with a width set. Just remember that your two elements must be on the same line to fit into a 100% width. Use a wrapper to set space between elements. Full demo can be found on CodePen. In the following example, p elements will be displayed side by side.


p { 
display: inline-block;
width: 50%;


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec neque ut dolor vehicula malesuada.</p><p>Aliquam ornare, orci elementum gravida congue, augue eros congue diam, nec vehicula velit velit non 
orci. In eget sem nunc. Nulla facilisi.</p>

CSS boilerplate

December 17, 2022 Reading time: 5 minutes

Here could be a CSS boilerplate for any project:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid orange;
font-family: sans-serif;



Using * we are targeting all elements.


margin and padding properties set to 0 are for cancelling default browser margin and padding (see this previous article). Remember:

  • use margin to determine the space around an element (values: length (fixed value), percentage (relative value to the container's width), auto (decided by the browser, usually centers horizontally))
    • top and bottom margin don't apply to replaced elements (external objects) such as iframe, video, embed, img
    • older browsers may not support flexbox, so to center an element inside its parent, also use
      margin: 0 auto;
  • use padding to determine the space inside an element (values: length or percentage)

box-sizing property is new to me. It sets how the total width and height of an element is calculated (this explanation and others as well are from MDN Web docs, completed by W3Schools): it can be either unrestricted or restricted to the parent's container.

    • default value is content-box. The calculation is:
      • element's width = witdh + padding + border
      • element's height = height + padding + border

      For instance,
      .box {
        width: 350px; 
        border: 10px solid black;

      renders a box that is 350 (box width) + 10 (right border ) +10 (left border) = 370px wide.

      This means that you may have elements sharing a same width and height but if they have different paddings and/or borders, their total size will be different.

    • the other possible value for box-sizing property is border-box. This changes the calculation to:
      • element's width = witdh
      • element's height = height

      In other words, padding and border are included in the total width and height:
      .box {
        width: 350px; 
        border: 10px solid black;
      renders a box that is 350px wide. This makes the world a little easier to live in, dosen't it?

border property to debug positioning drama - you should of course delete or comment (just in case haha) this line for going-live and chose a good contrasting color . I confess, when it comes to add some CSS I often feel not knowing why it's not behaving as expected. So just like many fellows, I'm adding borders to elements and yes, it helps a lot. To avoid repeating it, I put it inside the all selector (*).

font-family property to sans-serif just to make a first step out of raw HTML, it's totally subjective.

flexbox cheat-set

December 3, 2022 Reading time: 4 minutes

I still can't remember wich property apply to which axis so let's build a cheat-set! Again, many thanks to FreeCodeCamp courses for the detailed explanations.

For starters, in our HTML document we'll need a container as well as children boxes. For instance:

<h2>section 1</h2>
<p>Lorem ipsum dolor sit amet.</p>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Here the container is main and it's children boxes are section. Let's tell the browser how to position elements on the page:

main {
display: flex;
justify-content: space-evenly;

Explanations & other possibilites

First thing first, we have to declare we're using the flex model. Use display property value flex for that.

Main axis

The main axis is declared with flex-direction property:

  • row (default): horizontal axis with flex items from left to right
  • row-reverse: horizontal axis with flex items from right to left
  • column: vertical axis with flex items from top to bottom
  • column-reverse: column-reverse: vertical axis with flex items from bottom to top

The justify-content property determines how the items inside a flex container are positioned along the main axis. It can take this values (find all on mdn web docs):

  • Positional alignment: center | start | end | flex-start | flex-end | left | right
  • Distributed alignment: space-between | space-around | space-evenly | stretch

The flex-wrap property determines how the flex items behave when the flex container is too small. Otherwise, items will shrink if needed. It can take this values:

  • nowrap (default)
  • wrap
  • wrap-reverse

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. It can take one or two lenght value(s) (such as 1em for instance) or percentage value(s).

Cross axis

The align-items property controls alignment of all items on the cross axis. It can take this values:

  • Positional alignment: center | start | end | flex-start | flex-end
  • Baseline alignment: baseline | first baseline | last baseline