The CSS display property is a powerful tool for web designers. It lets you control website element layouts 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 webpage. This results in a variety of behaviors, including not showing up at all. You can edit these values on your website through the style sheet or the appropriate CSS customization sections in CMS tools like WordPress.

Keep Elements in Line With CSS display: inline

text with css inline value

Width and height values do not apply to an element with inline display; the content inside sets its dimensions. Inline HTML elements can sit side by side with other elements, behaving like a <span>. Display inline is most commonly 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;

   }

   #inline-1 {

       background-color: yellow;

       padding: 10px 0px 10px 10px;

   }

   #inline-2 {

       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 serve as a good example of the display inline value. When used together, this will display a single line of text made with two different HTML elements.

Control Website Layouts With CSS display: block

elements with css display block

In some ways, the display block value is the opposite of the inline value. Height and width dimensions can be set, and elements with this value can’t sit next to one another. The example above shows two elements with the block value. Elements with the block display value default at 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;

       }

       #block-1 {

           background-color: yellow;

           padding: 10px 10px 10px 10px;

       }

       #block-2 {

           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 display block value example splits the lines of text into two different lines. The fit-content width value sets the elements' width to match the length of the text.

Side-by-Side HTML Elements With CSS display: inline-block

html elements with css inline-block value

The CSS display inline-block value works just like a regular inline value, only with the ability to add specific dimensions. This makes it possible 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 one another.

        <!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;
       }
       #inline-block-1 {
           background-color: yellow;
           padding: 10px 10px 10px 10px;
       }
       #inline-block-2 {
           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 doesn't appear much different from the inline value. It is important to note that you can set the dimensions of elements with this value, though, making it easier to work with in certain cases.

Hide Website Elements With CSS display: none

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

Create Flexible and Responsive Elements With CSS display: flex

css display flexbox

Display flex is one of the newest CSS layout modes. When display flex is on a parent element, all elements inside it become flexible CSS elements. The parent element in this configuration is a flexbox.

Flexboxes create responsive designs with predefined variables, like width and height. It's worth learning about HTML/CSS flexboxes before you get started.

        <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>CSS Display Values</title>
   <style>
       .flex {
            display: flex;
            font-size: 3rem;
       }
       #flex-1 {
            background-color: yellow;
            width: 40%;
            height: 100px;
       }
       #flex-2 {
            background-color: lightgreen;
            width: 25%;
            height: 100px;
       }
       #flex-3 {
            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 Flexboxes Side-by-Side With display: inline-flex

css display flexbox with inline value

Inline-flex behaves just like a regular flexbox, with the added benefit of the element being able to sit next to other elements.

        <!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%;
       }
       #inline-flex-1 {
            background-color: yellow;
            width: 40%;
            height: 100px;
       }
       #inline-flex-2 {
            background-color: lightgreen;
            width: 25%;
            height: 100px;
       }
       #inline-flex-3 {
            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

basic html table made with css

The display table value is reminiscent of the older days of website design. While most websites don’t use tables for their layouts today, they are still valid for showing data and content in a readable format.

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

CSS display: table-cell

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

CSS display: table-row

The table-row value works just like a <tr> HTML element. As a parent of elements with the table-cell value, it will split your table into horizontal rows.

CSS display: table-column

The table-column value works similarly to the table-row value, only it doesn’t split your table up. Instead, you can use this value to add specific CSS rules to the different 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;
       }
       #column-1 {
            display: table-column-group;
            background-color: yellow;
       }
       #column-2 {
            display: table-column-group;
            background-color: lightgreen;
       }
       #column-3 {
            display: table-column-group;
            background-color: lightblue;
       }
       #row-1 {
            display: table-row;
       }
       #row-2 {
            display: table-row;
       }
       #row-3 {
            display: table-row;
       }
       #cell {
            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 makes it possible to place table elements next to other elements.

Build Responsive Website Layouts With CSS display: grid

css elements with grid value

The CSS display grid value is similar to the table value, only a grid’s columns and rows can have flexible sizing. This makes grids ideal for creating the main layout for web pages. They leave space for full-width headers and footers while also making it possible to have content areas of different 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-1 {
            grid-area: header;
            background-color: yellow;
            height: 100px;
            padding: 20px;
            text-align: center;
       }
       #grid-2 {
            grid-area: left-sidebar;
            background-color: lightgreen;
            height: 200px;
            padding: 20px;
            text-align: center;
       }
       #grid-3 {
            grid-area: content;
            background-color: lightblue;
            height: 200px;
            padding: 20px;
            text-align: center;
       }
       #grid-4 {
            grid-area: right-sidebar;
            background-color: lightgreen;
            height: 200px;
            padding: 20px;
            text-align: center;
       }
       #grid-5 {
            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 flexboxes, only they can place elements below and next to one another. The grid-template-areas property is vital for this. As you can see from the code, our header and footer take up four spaces in the array, as they are full-width. The sidebars take up one slot each, while the content takes two, effectively splitting the middle row of the grid into three columns.

CSS display: inline-grid

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

Using CSS Display for Web Design

The CSS display property offers a handy way to adjust website element structures without having to change HTML markup. This is ideal for those using content delivery platforms like Shopify or WordPress, but it can also be handy for general web design.