Website layouts

Using CSS display to control website layouts

The CSS display property is a powerful tool for web designers. It lets you control the layout of website elements with minimal styling, with simple values ​​that are easy to remember.

But what does each of these values ​​do and how do they work? Let’s find out.

What is the CSS display property?

The display property specifies the type of box rendering used for HTML elements on a web page. This results in a variety of behaviors, including not showing up at all. You can change these values ​​on your website through the appropriate stylesheet or CSS customization sections in CMS tools such as WordPress.

Keep elements aligned with CSS display: inline

The width and height values ​​do not apply to an element with inline display; the content inside defines its dimensions. Embedded HTML elements can be placed side-by-side with other elements, behaving like a . Inline display is most often used for text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
background-color: yellow;
padding: 10px 0px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>

This HTML markup and CSS above is a good example of inline display value. When used together, this will display a single line of text consisting of two different HTML elements.

Control website layouts with CSS display: block

In some ways, faceplate value is the opposite of online value. Height and width dimensions can be set, and items with this value cannot be placed next to each other. The example above shows two elements with the block value. Elements with the block display value default to the maximum width of their parent element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>

Unlike the inline style example, this faceplate value example splits lines of text into two separate lines. The fit-content width value sets the width of the elements to match the length of the text.

Side-by-side HTML elements with CSS display: inline block

The CSS display inline block value works like a normal inline value, only with the ability to add specific dimensions. This allows you to create grid-like layouts without having parent elements in place. Going back to the previous example, adding the inline-block value allows the elements to sit next to each other.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>

The inline-block value does not appear much different from the inline value. It is important to note that you can define the dimensions of the elements with this value, which facilitates the work in certain cases.

Hide website elements with display CSS: none

The simplest display value is “none”. This value hides the element and all child elements, as well as margins and other spacing properties. Elements with CSS value display none are still visible in browser inspectors.

Create flexible and responsive elements with CSS display: flex

Display flex is one of the newer CSS layout modes. When display flex is on a parent element, all elements within it become CSS flex elements. The parent element of this configuration is a flexible box.

Flexboxes create responsive designs with predefined variables, such as width and height. It’s worth learning about HTML/CSS flex boxes before you start.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

Position the Flexboxes side by side With display: inline-flex

Inline-flex behaves like a regular flex box, with the added benefit that the item can sit next to other items.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>

Create complex tables with CSS display: table

The value of the bulletin board is reminiscent of the old days of web design. Although most websites don’t use tables for their layouts today, they are still valuable for displaying data and content in a readable format.

Adding the array value to an HTML element will make it act like an array element, but you need additional values ​​for your array to work properly.

CSS display: table-cell

Items with the value table-cell act as individual cells in the main table. And table column and table row values ​​group these individual cells together.

CSS display: table-row

The table-row value works just like an HTML element

. As a parent of elements with value table-cell, it will split your table into horizontal rows.

CSS display: table-column

The table-column value works the same way as the table-row value, except it doesn’t divide your table. Instead, you can use this value to add specific CSS rules to the various columns that already exist.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
display: table-column-group;
background-color: yellow;
}
display: table-column-group;
background-color: lightgreen;
}
display: table-column-group;
background-color: lightblue;
}
display: table-row;
}
display: table-row;
}
display: table-row;
}
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>

Create side-by-side tables with CSS display: inline-table

Like the other inline variants we’ve already looked at, inline-table allows table elements to be placed next to other elements.

Build Responsive Website Layouts with CSS Display: Grid

CSS display grid value is similar to table value, only columns and rows in a grid can have flexible sizing. This makes grids ideal for creating the main layout of web pages. They leave room for full-width headers and footers while allowing for content areas of varying sizes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

Grids are similar to flex boxes, except they can place items below and next to each other. The grid-template-areas property is vital for this. As you can see in the code, our header and footer take up four spaces in the table because they are full-width. Sidebars take up one slot each, while content takes up two, dividing the middle row of the grid into three columns.

CSS display: inline grid

Using the inline-grid value will allow your grid to sit next to other elements, just like the other inline values ​​in this guide.

Using Display CSS for Web Design

The CSS display property provides a convenient way to adjust website element structures without having to edit HTML markup. This is great for those using content delivery platforms like Shopify or WordPress, but it can also come in handy for general web design.