CSS: Display Property

The display property in CSS is fundamental to controlling the layout of elements on a web page. It determines how an element is displayed in the document flow, affecting its size, positioning, and how it interacts with other elements. By setting the display property, you can transform elements into block-level, inline-level, or even completely removed from the document flow.

Understanding the display property is crucial for web development because it directly influences the structure and visual presentation of a webpage. For instance, setting an element to display: none will hide it completely, while display: block makes it a block-level element that takes up the full width available. The property can also be used to create flexible layouts with display: flex or display: grid, enabling complex arrangements without the need for floats or positioning.

Table of Contents

Basic Display Values

Code Example: Display Block, Inline, and None

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .block {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
		
        .inline {
            display: inline;
            background-color: lightcoral;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
		
        .none {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
		
    </style>
	
    <title>Display Property Examples</title>
	
</head>
<body>

    <div class="block">Block Element</div>
    <span class="inline">Inline Element</span>
    <div class="none">This element is hidden</div>
	
</body>
</html>

In this example, the .block class is styled with display: block, making it a block-level element that takes up the full width available and starts on a new line. The .inline class uses display: inline, so it flows along with text, only taking up as much width as necessary. The .none class uses display: none, hiding the element completely from the layout without occupying any space. This demonstrates the basic use of display: block, inline, and none.

Flexbox Layout

Code Example: Creating a Flex Container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
		
        .item {
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
            border: 1px solid #000;
        }
		
    </style>
	
    <title>Flexbox Layout</title>
	
</head>
<body>

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
	
</body>
</html>

In this flexbox example, the .container class is set to display: flex, making it a flex container. The justify-content: space-around property spaces the child items evenly with space around them, while align-items: center vertically centers them within the container. Each .item has padding and a border to distinguish them. This layout demonstrates how flexbox simplifies alignment and spacing of items within a container.

Grid Layout

Code Example: Creating a Grid Container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            background-color: #e0e0e0;
        }
		
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            border: 1px solid #000;
            text-align: center;
        }
		
    </style>
	
    <title>Grid Layout</title>
	
</head>
<body>

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
	
</body>
</html>

In this grid layout example, the .grid-container is defined with display: grid, and grid-template-columns: repeat(3, 1fr) creates three equal columns. The gap: 10px property adds space between the grid items. Each .grid-item is styled with padding and a border for clarity. This setup showcases how CSS Grid simplifies the creation of complex grid-based layouts with rows and columns.

Using `display: inline-block`

Code Example: Inline-Block Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .inline-block {
            display: inline-block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
		
    </style>
	
    <title>Inline-Block Example</title>
	
</head>
<body>

    <div class="inline-block">Inline-Block Element 1</div>
    <div class="inline-block">Inline-Block Element 2</div>
	
</body>
</html>

In this example, the .inline-block class uses display: inline-block, making the elements behave like inline elements while allowing block-level styling properties such as padding and margins. This combination is useful for elements that need to be placed inline but still need block-level features. The result is elements that flow along with text but maintain their box model properties.

`display: table` and `display: table-cell`

Code Example: Table Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .table {
            display: table;
            width: 100%;
            border: 1px solid #000;
        }
		
        .row {
            display: table-row;
        }
		
        .cell {
            display: table-cell;
            padding: 10px;
            border: 1px solid #000;
        }
		
    </style>
	
    <title>Table Layout</title>
	
</head>
<body>

    <div class="table">
	
        <div class="row">
            <div class="cell">Cell 1</div>
            <div class="cell">Cell 2</div>
            <div class="cell">Cell 3</div>
        </div>
		
        <div class="row">
            <div class="cell">Cell 4</div>
            <div class="cell">Cell 5</div>
            <div class="cell">Cell 6</div>
        </div>
    </div>
	
</body>
</html>

In this example, the .table class uses display: table to create a table container. Each .row uses display: table-row, and the .cell class uses display: table-cell, making them behave like table rows and cells. This setup is useful for creating simple table layouts without using HTML table tags, providing more control over styling and layout.

Dynamic Content with `display: flex` and `grid`

Code Example: Combining Flex and Grid Layouts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 200px;
            background-color: #f0f0f0;
        }
		
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            background-color: #e0e0e0;
        }
		
        .item {
            padding: 20px;
            border: 1px solid #000;
            text-align: center;
        }
		
    </style>
	
    <title>Flex and Grid Combination</title>
	
</head>
<body>

    <div class="flex-container">
        <div class="item">Flex Item 1</div>
        <div class="item">Flex Item 2</div>
        <div class="item">Flex Item 3</div>
    </div>
	
    <div class="grid-container">
        <div class="item">Grid Item 1</div>
        <div class="item">Grid Item 2</div>
        <div class="item">Grid Item 3</div>
        <div class="item">Grid Item 4</div>
        <div class="item">Grid Item 5</div>
        <div class="item">Grid Item 6</div>
    </div>
	
</body>
</html>

In this example, we combine both flex and grid layouts to demonstrate their unique advantages. The .flex-container uses display: flex to arrange items horizontally with equal space around them, ensuring they are centered vertically within a container that is 200 pixels tall. The .grid-container uses display: grid to create a three-column layout with evenly spaced rows. Each .item is styled with padding, a border, and centered text. This combination showcases how flex and grid layouts can be used together to create versatile and responsive designs.

Using `display: inline-flex`

Code Example: Inline Flex Container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <style>
	
        .inline-flex-container {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: #f8f8f8;
            padding: 10px;
            border: 1px solid #000;
        }
		
        .inline-flex-item {
            background-color: lightblue;
            padding: 10px;
            border: 1px solid #000;
        }
		
    </style>
	
    <title>Inline Flex Example</title>
	
</head>
<body>

    <div class="inline-flex-container">
        <div class="inline-flex-item">Inline Flex Item 1</div>
        <div class="inline-flex-item">Inline Flex Item 2</div>
        <div class="inline-flex-item">Inline Flex Item 3</div>
    </div>
	
</body>
</html>

In this example, the .inline-flex-container uses display: inline-flex, making it an inline-level flex container that allows its items to be flexibly arranged. The container stretches to fill the available width and uses justify-content: space-between to distribute the items evenly with space between them. Each .inline-flex-item has padding and a border, styled with a light blue background. This layout is useful for inline elements that need flex behavior, such as navigation menus.

Conclusion

In this article, we explored the CSS display property and its various values, including block, inline, none, flex, grid, inline-block, table, and inline-flex. We demonstrated how to use these properties to create different types of layouts.

The examples and concepts covered in this article provide a solid foundation for working with the CSS display property. However, the possibilities are endless. I encourage you to experiment further and explore how different display properties can enhance your web designs.

Additional Resources for Learning About CSS Display Property

To continue your journey with the CSS display property, here are some additional resources that will help you expand your knowledge and skills:

MDN Web Docs – CSS Display: The official MDN documentation provides comprehensive information on the CSS display property. MDN CSS Display

CSS-Tricks: CSS-Tricks offers a variety of articles and tutorials on CSS display and related topics. CSS-Tricks Display

W3Schools: W3Schools provides easy-to-follow tutorials and examples on the CSS display property. W3Schools CSS Display

Can I use: Check browser compatibility for various CSS properties, including display. Can I use

By leveraging these resources and continuously practicing, you’ll become proficient in using the CSS display property and be well on your way to creating impressive and functional web designs.