CSS Layout Guide

For the record, this article is based on @Rachel Andrew’s Getting Started With CSS Layout.

CSS layouts have changed dramatically over the years, and so has the way we now develop websites. Now we need alternative CSS layouts to develop our websites, which requires us to make the right and appropriate choices for these layouts. In this article, we will introduce the basic use of various CSS layouts and their purposes.

If you’re new to CSS and want to know what the best layout is, this article is just what you need. If you’re an experienced developer who wants to get up to date on CSS layouts, this article is worth your time. Of course, this article doesn’t go into the technical details of CSS layouts, or a book could be written on the subject. However, this article provides a basic overview of the various CSS layouts and links to further enhance your knowledge of the techniques.

Normal document flow

If you select a page that does not use any CSS to change the layout, the HTML elements will be arranged in a Normal Flow. In normal flow, element boxes (any HTML element is really a box) are arranged one after the other (in different directions depending on the document’s writing mode) based on the document’s writing mode. This means that if your writing pattern is horizontal (sentences are written left to right or right to left), normal flow will arrange the block-level elements of the page vertically, one after the other. If you are in a vertical writing mode, where sentences are written vertically, the block-level elements will be aligned horizontally.

Normal flow is the worst kind of layout: when you apply CSS to your document and create some CSS layout, the blocks do something outside of normal document flow.

Take advantage of normal document flow through the page structure

By ensuring that the written page is well-structured (HTML structure), you can maximize the benefits of normal document flow. Imagine if there was no normal flow in the browser, and all the HTML elements you created would pile up in the upper right corner of the browser. This means that you must specify how all HTML elements should be laid out.

With normal flow, users can still read your page even if CSS loads fail. At the same time, some tools that don’t use CSS, such as screen readers, read the content of the page based on the element’s position in the document. In addition, from a usability perspective, this is very helpful, and also makes the developer’s life easier. If your content is in the order that users expect to read it, you don’t need to do a lot of layout tweaking to get elements in the right place. As you read on, you’ll see how using the new layout can make page layout more efficient.

Therefore, before thinking about layout, you need to think carefully about the structure of your document and the order in which you want users to read it.

Out of normal document flow

Once the page has a good structure, you need to decide how to use it and turn it into the layout we need. This involves deviating from normal document flow (more on this later). There are a number of layout artifacts available, the first of which is float, which is a great example of what it means to deviate from normal document flow.

floating

Floats are used to move the element box to the left or right while the content is displayed around it.

To float an element, you need to set the element’s Flaot attribute to left or right. The default value for float is None.

.item {
    float: left
}
Copy the code

Note that when you float an element and surround it with text, the content’s Line Box is shortened. If you float an element and set a background color for the following element that contains text, you will find that the background color appears below the floating element.

If you want some space between the floating element and the surrounding text, you need to set a margin for the floating element. Setting margins on text elements simply indents them relative to the container. For example, in the following example, you need to set the right margin and bottom margin for the image floating on the left.

Remove the floating

Once an element is floated, all subsequent elements wrap around it until the content processes below it and the normal document flow begins to apply. If you want to avoid this situation, you can manually clear the float.

You can add the clear attribute to an element if you do not want it to be affected by its previous floating element. The left value clears the left float, the right value clears the right float, and the both value clears the left float.

.clear {
    clear: both;
}
Copy the code

If you want elements to be arranged after floating elements, the above code will do the job. If you find that you have a floating element inside the container and the text inside the container is too short, you will have a problem. The text box will be drawn under the floating element, and then the rest of the text will be drawn behind it as normal flow.

To avoid this, we need to apply the clear attribute to an element in the container. We can add an empty element at the end of the container and set the clear property. However, in some cases this approach may not be possible (for example, for pages generated by CMS systems, the HTML structure is difficult to refactor). Therefore, the most common way to clear floats is to add a CSS pseudo-element to the container and set its clear value to both.

Block level formatting context

Another way to clear up floats is to create a BFC (Block Formatting Context) inside the container. A BFC element completely wraps all of its internal elements, including the internal floating element, ensuring that the floating element does not go beyond its bottom. There are many ways to create a BFC, the most common of which is to set its overflow property to a value other than Visible.

.container {
    overflow: auto;
}
Copy the code

Using overflow as above is generally effective and clears floats. However, in some cases, box-shadows may be cropped or scroll bars may appear (which you don’t want). At the same time, it looks a bit messy in the stylesheet: Overflow is set up to allow scrollbars to appear, whereas this is just used to clean up floats. So does setting up overflow really want scrollbars to appear, or clear floats?

To make use of the intent to clear the float more intuitive, and to avoid the negative effects of the BFC, you can use display’s flow-root to clear the float. Display: The only thing flow-root does is to create a BFC, so it avoids the side effects of other methods of creating BFC.

.container {
    display: flow-root;
}
Copy the code

Some legacy uses of float

Before the new layout, float was often used to create multi-column layouts. We’ll set width for a series of elements and float them one by one. You can create a grid-like effect by setting some fine percentage sizes for the floating elements.

I do not recommend using a floating layout at this point. However, in existing sites, this layout will still exist for many years to come. So, when you encounter a page full of floats, you can be sure that it is using a floating layout.

positioning

To remove an element from the normal document flow or change its position within the normal document flow, use the POSITION property of the CSS. In normal document flow, the position of the element is static (which is also the default value of position). At the block level the elements are arranged one after the other, and as you scroll the page, the elements scroll with you.

When you change the position property of an element, you usually also set some offset to move the element relative to its reference. Different positions produce different references.

Relative positioning

If an element sets the position property to relative, its offset reference bit is its original position in the normal document flow. You can use the top, right, bottom, and left attributes to move an element relative to its normal document flow position.

.item {
    position: relative;
    bottom: 50px;
}
Copy the code

Note that other elements on the page are not affected by this element’s position change. The element’s place in the normal document flow is preserved, so you have to deal with overwriting elements yourself.

Absolute positioning

The position attribute of the element with a value of absolute takes it completely out of normal document flow. The space it used to occupy will also be removed. The element is positioned relative to the viewport container unless the position value of one of its ancestors is set to non-static.

So, when you set position: Absolute for an element, the first thing that happens is that the element is positioned in the upper-left corner of the window. You can use the top, right, bottom, and left attributes to set offsets to move elements to where you want them.

.item {
    position: absolute;
    top: 20px;
    right: 20px;
}
Copy the code

In general, you don’t want the element to be positioned relative to the window, but relative to the container element. In this case, you need to set a value for the container element other than the default static.

Since setting position:relative to an element does not remove it from normal document flow, it is generally a good choice. Set position:relative to the container elements you want to be relative to to offset the absolutely positioned elements.

Fixed position

In most cases, the position:fixed element is positioned relative to the window and is removed from the normal document flow, as well as not retaining the space where the element is pointed. As the page scrolls, the fixed elements remain in position relative to the window, while the rest of the normal document flow scrolls as usual.

.item {
    position: fixed;
    top: 20px;
    left: 100px;
}
Copy the code

This works great when you want a fixed navigation bar that stays on the screen all the time. As with any position value (except static), some elements can be obscured. Care needs to be taken to ensure that the page content is readable without being obscured by fixed elements.

If you need a fixed element that is not positioned relative to the window, you need to set one of the transform, Perspective, or filter attributes for the container element (not the default value none). The fixed element is then offset relative to the block element, not to the window.

Sticky positioning

Setting position: sticky causes an element to scroll on the page as if it were in normal flow, but when it is rolled to a specific position relative to the viewport it will be fixed on the screen, as if it were fixed. This property value is a new value for the Position property and will be less compatible in browsers, but will be ignored in incompatible browsers and will revert to normal scrolling.

.item {
    position: sticky;
    top: 0;
}
Copy the code

The following code shows how to create a very popular navigation bar effect: the navigation bar scrolls along the page and stays at the top as it scrolls to the top of the page.

Flex layout

Flexbox layout is a layout method designed for one-dimensional layout. One-dimensional means you want the content to be laid out in rows or columns. You can set display to flex on the element to make it flexible.

.container {
    display: flex;
}
Copy the code

The immediate children of the container become Flex items and are arranged in rows.

The shaft of the Flexbox

In the example above, the elastic items are aligned from the starting position within the row, rather than being left-aligned. These elements are arranged in line because the default flex-direction value is row, which represents the line direction of the text. Since we are working in English, a left-to-right language, the starting position of the line is on the left, so our elastic term also starts on the left. Therefore, the flex-direction value is defined as the Main Axis of Flexbox.

A Cross Axis is a Flexbox Axis perpendicular to the main Axis. If flex-direction is row, and the elastic items are arranged inwards, then the cross axis is the alignment of the block-level elements. If flex-direction is column, the elastic items are aligned in the same direction as the block-level elements, and the cross axis becomes row.

If you’re used to using Flexbox boxes from a spindle and cross axis perspective, it’s pretty easy.

Direction and sequence

Flexbox allows us to change the direction of the elastic pick on the spindle by setting the Flex-direction property to a row-reverse or column-reverse value.

Of course, you can also change the order of an elastic item by using the order attribute. Be aware, however, that this can cause problems for users accessing your site via a keyboard (rather than a mouse or touch screen), because TAB order is the order in which elements on the page appear in the source code, not the order in which they appear. You can read more about this in the “Display and document Order” section below.

Flex properties

The Flex property is used to control the size of the elastic item on the main axis. It is shorthand for the following three properties:

flex-grow
flex-shrink
flex-basis

The shortened Flex property has three values, the first being flex-grow, the second flex-shrink, and the third flex-basis.

.item {
    flex: 1 1 200px;
}
Copy the code

Flex-basis sets the initial size of the elastic item without stretching and compression. In the example above, the size is 200px, so we give each item 200px space. However, most of the time the container element size will not be exactly divided into many 200px items, but may have some insufficient or spare space. The Flex-grow and flow-shrink attributes allow us to control the size of each elastic item when the container size is insufficient or available.

If the flex-grow value is arbitrarily positive, the elastic term is allowed to stretch to take up more space. So, in the example above, when the terms are set to 200px, all the extra space is bisected and filled by each elastic term.

If the flex-shrink value is an arbitrarily positive number, then the element will shrink when it overflows the container after the elastic term is set to Flex-basis. In the CSS example above, if the container runs out of space, each elastic item is scaled equally to fit the container size.

The flex-grow and Flex-shrink values can be any positive number. An elastic term with a larger flex-grow value will stretch a larger percentage of the container when it has free space; An item with a larger Flex-shrink value will be compressed more when the container space is insufficient.

Understanding these properties is key to understanding how to use elastic layouts, and some of the resources listed below will help you learn more about the details. Consider using the elastic box model when you need to stretch or compress elements in one dimension of the container. If you find yourself trying to arrange your content in both row and column dimensions and you need a grid model, the elastic box model is probably not the best tool.

The Grid layout

CSS Grid layout is a technique for two-dimensional layout. Two-dimensional means you want to arrange your content in rows and columns. Like Flexbox, the Grid layout requires a display value. You can set display: grid for container elements and use grid-template-columns and grid-template-rows attributes to control rows and columns in the grid.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px;
}
Copy the code

The CSS above creates a grid of column and column elements of a fixed size. But that may not be what you want. The default value is auto, which you can assume stands for “make the grid as large as possible.” If you do not specify the size of each row, all added row contents will be set to Auto. A common pattern is to specify column widths for the grid, but allow the grid to add rows as needed.

You can set up rows and columns using any length unit or percentage of hours, and you can use the new unit created for the grid system – FR. The FR is an elastic unit that specifies how the space within the grid container is divided.

The grid calculates and allocates space for you, you don’t need to calculate the percentage of elements to fit the container size. In the following example, we use FR to create the grid’s columns, which makes the grid’s columns adaptive. We also use grid-gap to ensure spacing between elements (more on spacing between elements and elements in the grid in the “Alignment” section).

Like flex-grow or Flex-shrink in a Flexbox layout, FR allocates space available to Grid projects based on the space of the Grid container. If the value of FR is larger, it means that more space is available for the corresponding grid track. You can also use a mixture of FR and fixed length. Before calculating fr, the space required for the length is subtracted from the available space.

The grid term

A grid system always has two axes: the Inline Axis represents the alignment of text in the page, and the Block Axis represents the alignment of block-level elements in the page.

An element set to display: grid is called a grid container. In the Grid container there are Grid lines, which are the rows and columns in the Grid when you specify grid-template-columns and grid-template-rows. The smallest unit in a Grid (that is, the Area cut off by four Grid lines) is called a Grid Cell, and further, a rectangular Area composed of several cells is called a Grid Area.

The dotted lines in the figure above are grid lines

The area between the two grid lines is the grid track (the row or column of the grid)

Grid cells and grid regions

Automatic grid arrangement rules

Once you have created the grid, the immediate children of the grid container begin to place themselves, one by one, in the cells of the grid. Child elements are placed according to the grid’s automatic arrangement rules. These rules ensure that elements within the grid are arranged in empty cells and do not cover each other.

Any immediate child element in the grid that has not been positioned is placed according to the automatic arrangement rule. In the following example, I make the first of every three elements occupy two rows, but still auto-arrange from the starting line.

Row – or column-based positioning

The easiest way to locate grid elements is to use a row – or column-based positioning method, which simply tells the browser from which row to which row to merge. For example, if you need a 2 x 2 grid area, you can specify elements from row 1 to row 3 and from column 1 to column 3 to cover up to four cells.

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
Copy the code

These attributes can be denoted by abbreviations: grid-column and grid-row, where the first value represents the start value and the second value represents the end value.

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
Copy the code

You can also have grid items occupy the same cell. Support for design overlays between some content. Grid items are stacked on top of each other as they would normally be on a web page. In HTML source code, the bottom grid items are stacked on top of each other. You can still use z-index to control the stack order.

Locate elements by naming regions

You can locate elements in a grid by naming grid regions. To do this, you need to give each element a name and describe the layout using the values of the Grid-template-Areas attribute.

.item1 {
    grid-area: a;
}

.item2 {
    grid-area: b;
}

.item3 {
    grid-area: c;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "a a b b"
    "a a c c";
}
Copy the code

There are a few caveats to using this approach. If you want to combine cells as your grid items, you need to repeat the element’s name. The grid area needs to form a complete rectangle — each cell needs to be filled with a value. If you want to free up some cells, you need to use it. This value. For example, in the CSS below I leave the lower-right cell blank.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "a a b b"
    "a a c .";
}
Copy the code

You can also use the following Demo code to see the layout in action.

This article has only covered the basics of CSS Grid layout. There is a lot more to learn, and the following materials can help you learn more. Grids can be used for the layout of some components or entire pages. If you need to lay out in two dimensions, a grid layout is a good choice — regardless of the size of the area you need to lay out.

Display order vs. document order

At the beginning of this article, I recommend that you organize your documents from top to bottom, which will help readability and CSS layout. From our brief introduction to Flexbox and CSS Grid layouts, you may find that using these layouts can dramatically change the order in which page elements are presented in your document. This can lead to an implicit problem.

In some non-visual application scenarios, the browser will follow the documented source code. Thus, a screen reader reads the order of documents, and a user using the TAB key accesses documents based on the order of the source code, not the order in which the elements are presented. Many screen reader users are not completely blind and may be able to see where these elements are in a document while using a screen reader. In these cases, the chaotic presentation of the page can be confusing when compared to the source code.

When you change the original order of elements in a document, make sure you know what you’re doing. If you find yourself reordering your elements in CSS, you should go back and see if you want to reorganize your page elements. You can test your page by using TAB access.

Box model generation

Everything you write on a web page generates a box (every element of HTML is a box), and everything in this article is really about how you can use CSS to lay out those boxes according to your design. However, in some cases, you may not want to create a box at all. The display property has two values that will help you handle this situation.

No box or contents generated (display: None)

If you want the element and all of its contents (including all of its children) not to be generated, you can use display: None. This way elements are not displayed and do not retain the space they should occupy.

.item {
    display: none;
}
Copy the code

Does not generate the element, but all of its children (`display: contents`)

Display: content is a new property value of display. Applying the display: content attribute to an element causes its own box to not be generated but all child elements to be generated as usual. How does that help? This can be useful if you want an elastic layout or grid layout to be applied to indirect child elements.

In the following example, the first elastic term contains two children, and since it is set to display: contents, its box is not generated and its two children become elastic terms and are laid out as direct children of the elastic box container.

alignment

Until now, alignment has been a thorny issue on the Web, and there are very few ways to do it. All this has changed with the advent of CSS box model alignment. You will use it to control alignment between Grid containers and Flexbox containers. Various other layout methods will apply these alignment properties in the future. A list of detailed properties in the box model alignment specification is as follows:

justify-content
align-content
place-content
justify-items
align-items
place-items
justify-self
align-self
place-self
row-gap
column-gap
gap

Because different layout models have different characteristics, there are some differences in the presentation of the alignment attributes used for different layout models. Let’s see how alignment works in some simple grid and elastic layouts.

The align-items and context-items properties are a bulk form of the align-self and context-self properties, in contrast. These attributes control the alignment with the element in its grid region.

The align-content and context-Content attributes control the alignment of rows or columns in the grid (the grid container requires extra space after the row or column elements are aligned).

In the Flexbox layout, align-items and align-self are used to solve alignment problems on the intersecting axes, while justice-content is used to solve space allocation on the main axis.

After wrapping the Flex lines and extra space in the Flexbox container on the cross axis, you can use align-content.

The links below discuss box model alignment in more detail in various layout methods. Taking the time to understand how alignment works is well worth the effort to understand elastic boxes, grid layouts, and future layout methods.

The spacing of rows or columns

A multi-column layout has the column-gap attribute. So far, grid layouts have grid-column-gap, grid-row-gap, and grid-Grid. These have now been removed from the Grid standard and added to box model alignment. At the same time, the prefix properties of grid- have been renamed column-gap, row-gap, and gap. Browsers will replace prefixed attributes with new renamed attributes, so don’t worry if you use older, more compatible names in your current code.

The renaming means that these properties can also be applied to other layout methods, with elastic boxes being an obvious candidate. While no browser currently supports the gap attribute in the box model, in the future it should be possible to use column-gap and row-gap to create the spacing between elastic project elements.

Multi-column layouts

A multi-column layout is a layout type that supports the creation of multiple columns, as in a newspaper. Each block is divided into columns, and you’ll read down the column in the block direction and then come back to the top of the next column. Reading in this way doesn’t always work with web content, however, because people don’t want to scroll around. This is useful when you need to show a small amount of content, collapse a set of check boxes, or other small UI components.

Multi-column layouts are also useful when displaying a set of cards or products of different heights.

Sets the width of the column

To set an optimal column width and tell the browser to display as many columns as possible at that width, use the following CSS:

.container {
    column-width: 300px;
}
Copy the code

This creates as many columns 300px wide as possible, and all the remaining space is shared by all the columns. Therefore, unless there is nothing left when the space is divided to 300px, you will have slightly more columns than 300px.

Sets the number of columns

In addition to setting the width, you can use column-count to set the number of columns. In this case, the browser will divide the space equally among the number of columns you need.

.container {
    column-count: 3;
}
Copy the code

If you add both column-width and column-count, the column-count attribute will be used as a maximum limit. In the code below, the columns are added until three are reached, at which point any extra space is divided among three columns, even if there is enough space to make an extra new column.

.container {
    column-width: 300px;
    column-count: 3;
}
Copy the code

Spacing and column rules

You can’t add margin and padding to a single column box, you need to use the column-gap attribute to set the spacing. If you do not specify a column-gap value, it defaults to 1em to prevent collisions between columns. This differs from the behavior of column-gap in other layout methods, where the default is 0. You can use any length unit on the spacing, including 0 if you don’t want column spacing.

The column-rule attribute gives you the ability to add rules between two columns. It is a short form of column-rule-width, column-rule-color, and column-rule-style, and behaves like border. Note that a rule by itself does not take up any space. It occupies the top of the spacing, increasing or decreasing the space between the rules and the content where you set column-gap.

Allows elements to span multiple columns

You can use the column-span attribute to allow elements in a multi-column container to span multiple columns, like a generic column.

h3 {
    column-span: all;
}
Copy the code

When column-span is present, the multi-column container sorting stops at that element, so the contents of the container form a multi-column style above the element, and then a new set of column boxes across the element below.

You can only use column-span: all or column-span: None, and you can’t make an element span several columns (non-general columns). As of this writing, Firefox does not support the column-span property.

fragmentation

A multi-column layout is an example of fragmentation, where page content is broken down into columns. This is very similar to printing when the content is divided into different pages. This process is addressed by the Fragmentation Specification. This specification includes several attributes that help control content sharding.

For example, if you have a set of cards in multiple columns and you want to make sure the cards don’t get cut in half into different columns, you can use the avoid value of the break-inside property. For browser compatibility reasons, you may also want to use the legacy Page-break-inside property.

.card {
    page-break-inside: avoid;
    break-inside: avoid;
}
Copy the code

If you want to disallow line breaks after title elements, you can use the break-after attribute.

.container h2 {
    page-break-after: avoid;
    break-after: avoid;
}
Copy the code

These properties can be used in print styles or multi-column styles. In the following example, three paragraphs in a multi-column container are split into three columns. I set break-inside: avoid for the P element, which means that each multiple column ends up in its own column (even if it makes the columns different in length).

How do I choose a layout type?

Most web pages use a mixture of layout types. Each layout specification defines exactly how they interact with each other. For example, you might use an elastic layout for grid items in a grid layout. Some elastic containers may have positioning properties or floats. These specifications already include a mix of layout models based on optimal layout. In this guide, I’ve tried to outline the basic use of this layout type to help you understand the best possible way to achieve an effect.

However, don’t be afraid to use multiple methods to achieve layout design. Worrying about whether your choices will actually cause problems is much less common than you think. So organize your document from the beginning, and pay attention to the visual order in which your document content is presented. Most of the rest is to test your layout in the browser to see if it works as expected.

The desert

Illustration of CSS3: Core technologies and case studies

If you want to reprint, please indicate the source: www.w3cplus.com/css/guide-c…

Normal document flow

Take advantage of normal document flow through the page structure

Out of normal document flow

Further reading

floating

Remove the floating

Block level formatting context

Some legacy uses of float

Further reading

positioning

Relative positioning

Absolute positioning

Fixed position

Sticky positioning

Further reading

Flex layout

The shaft of the Flexbox

Direction and sequence

Flex properties

Further reading

The Grid layout

The grid term

Automatic grid arrangement rules

Row – or column-based positioning

Locate elements by naming regions

Further reading

Display order vs. document order

Further reading

Box model generation

No box or contents generated (display: None)

Does not generate the element, but all of its children (display: contents)

Further reading

alignment

The spacing of rows or columns

Further reading

Multi-column layouts

Sets the width of the column

Sets the number of columns

Spacing and column rules

Allows elements to span multiple columns

Further reading

fragmentation

Further reading

How do I choose a layout type?

The desert

Related Posts

Help, JS running mechanism!!

Web Page Skeleton Screen Automatic Generation Scheme (DPS)

Webpack 5 Tutorial 1: Getting to know Webpack

Does not generate the element, but all of its children (`display: contents`)