CSS float grids

by Jide Adebiyi

As defined by MDN, Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media...

One of the problems faced by starters in web development is how to arrange content using css on the web to fit the screen sizes of any device. With css floats you can achieve layout and positioning easily. As a starter to front-end web development taking your time to understand how to use CSS floats to achieve a grid system is super helpful for a strong CSS foundation.

Basics

Normal Flow

The normal positioning for HTML elments in a webpage is the same way they are written in the HTML code i.e from top to bottom and left to right, the flow wraps depending on the space available on the screen.

CSS postioning allows us re-organise these HTML elements regardless of their position in the normal flow.

CSS Positioning

Positioning simply refers to the layout of the items on your page.The CSS **position** property specifies the type of positioning method used for an element. The most used values of the position property are:
  • static
  • relative
  • absolute

Read more about CSS positioning here

The Box Model

It is necessary to understand how the CSS Box Model Works before explaining how to use CSS to arrange elements. HTML elements can be considered as boxes. The term **box model** is used when talking about design and layout. The CSS box model refers to the space dimension of HTML elements which is usually of a box shape. This box shape dimension consists of: the actual content of the HTML element and its margin, border, and padding.

The box model also determines the spacing of elements in relation
to other elements.

When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full dimension of the element, you must also add the padding, border and margin. That is:

  • Total element width = defined width + left padding + right padding + left border + right border + left margin + right margin.

  • Total element height = defined height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

Grids

In the world of design, a grid is a series of vertical and horizontal lines that can be used to specify vertical (columns) and horizontal (rows) sections of an art-board. Grid also refers to the space (gutters) between individual columns and rows.

These sectioning helps ensure visual consistency between elements.

    The Container
    As the name implies, the container houses the grid. Think of it like a warehouse filled with stacks of boxes. In css, the container takes the entire width of the page (i.e. 100%). Maximum width is then set to accommodate Lager displays.

    The css box-sizing property ensures that columns remain in the container after padding and floating.

    See the Pen css grids Container by Jide (@Jidemartins) on CodePen.
    The Row
    Rows contain columns. On the webpage, the row keeps the columns within it from overflowing to other rows especially after floating it. This is achieved with the clear-fix hack or by setting overflow to auto. The overflow property makes ensures that the row-container has a height after floating. See the Pen mMJEjY by Jide (@Jidemartins) on CodePen.
    Column Positioning
    The column is the most important part of the grid. There are several different ways of positioning columns in CSS. While trying to position the columns take into consideration, the various widths and factors like responsiveness. There are all different ways of positioning columns in CSS. They include: inline-blocks, display-table, display-flex and most popular and least error prone **floats**. If our columns are empty however, floated columns will stack on top of each other. To prevent this, a minimum height is given. For the remainder of this write-up, we would be using a 6-column grid system. meaning 3 columns is 50% of the total 100% 6 columns, 1 column is 16.66% and so on. See the Pen columns by Jide (@Jidemartins) on CodePen.