CSS - Managing Text Flow [LESSON]

Managing Text Flow

To make our web pages easy to read and have a professional appearance, we need to manage the text flow. Text flow has to do with how the page is laid out. This can be done in several different ways, in this lesson we will learn about CSS layouts using divs, the box model, and CSS Grid.

CSS Layout

An easy way to create a good layout and positioning of your elements is by using div tags. Div tags are like text boxes. With a div tag, we can create a box that can be styled and placed where we want it on the page.

Image showing a div tag code, the CSS and the result.

The CSS Box Model refers to how browsers will render each element. This is done according to the box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), the content, padding, border, and margin. The amount of padding, the border, and the margin are set using CSS.  The padding and margin are invisible, the border is not, it can be a color and a style. 

Citation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model CC-BY-SA

CSS Box Model

CSS Box Model

Example of CSS Box Model

CSS Box Model - Image shows the HTML code, the CSS and the result

CSS Grid

The CSS grid makes it easier to create responsive layouts. The grid is divided into columns and rows, with gutters, or gaps, between each column and row. You can specify the exact width and height for a row, column or gap, or an area, or you can make it responsive by using flexible sizing. 

CSS Grid

CSS grid with parts labeled as rows, columns, and gutters.

Below is an example of a normal flow with div containers. We will use this beginning to show how to create a CSS grid.

Example of Using Grids – Normal Flow Before Grid Applied

Image showing the code for a normal flow layout as a starting point for our grids. This shows 7 div containers.  Image showing the code for a normal flow layout as a starting point for our grids. This shows 7 div containers.

To start a grid, you will start with the display property: .container {display: grid;}. This will identify the container as using the grid layout. Just putting this will create a one column grid and it will look like content that is not in a grid. However, you add columns to set the grid. This can be done with pixels, which are set sizes, percentages, or fraction (fr) units.

.container {

  display: grid;

  grid-template-columns: 200px 200px 200px;

}

Image showing a grid example of 3 columns.

Since we want to be creating responsive websites, we need to create flexible layouts as much as possible. The best way to do that is to use the fr unit to flexibly size grid rows and columns. This unit represents one fraction of the available space in the grid container. The fr unit distributes space proportionally.

.container {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

}

The first section now gets 2fr of the available space and the other two sections get 1fr, making the first column larger. You can mix fr units with fixed length units – in such a case the space needed for the fixed sections is used up first; the remaining space is then distributed to the other sections.

Image showing how using fr units can change your layout.

Now that we have a basic understanding of how grids work, let’s discuss using grid-template-areas. This is an alternative way to arrange items on your grid. With this property, you give the various elements of your design a name, which may be easier to remember. For instance, you can use the names of your sections to identify your grid areas. So, you might want to name your header sections “header,” aside sections as “aside” or “sidebar,” article sections as “article” or “content” and footer sections as “footer.” In the code below you are telling the browser to create a grid with two columns of header (so that is one merged header two columns wide), the second row would be 1 column sidebar and 1 column content, and the third row would be a merged 2 column footer. The size of the columns is 1fr for the first column and 3fr for the 2nd column, so the first column will be 1/3 the size of the 2nd column. There is a 20 px gap between columns and rows to give space.

.container {

  display: grid;

  grid-template-areas:

    "header header"

    "sidebar content"

    "footer footer";

  grid-template-columns: 1fr 3fr;

  gap: 20px;

}

Watch the Grid Template Areas for a walk-through video.

The rules for grid-template-areas are as follows:

  • You need to have every cell of the grid filled.
  • To span across two cells, repeat the name.
  • To leave a cell empty, use a . (period).
  • Areas must be rectangular – for example, you can’t have an L-shaped area.
  • Areas can’t be repeated in different locations.

Citation: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids  - CC-BY-SA - Mozilla

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION