CSS Layout – The display Property

The display property is used to define how an HTML element should be displayed. It is one of the most powerful CSS properties for creating layouts.

1. display: inline

Elements with display: inline do not start on a new line and only take up as much width as necessary.

<div class="inline">Inline Element</div>
<div class="inline">Inline Element</div>

<style>
.inline {
    display: inline;
    background-color: #b3e5fc;
    padding: 10px;
}
</style>

2. display: block

Elements with display: block start on a new line and take up the full width available.

<div class="block">Block Element</div>
<div class="block">Block Element</div>

<style>
.block {
    display: block;
    background-color: #ffccbc;
    padding: 10px;
}
</style>

3. display: inline-block

Elements with display: inline-block are like inline elements but they can have a width and height.

<div class="inline-block">Inline-Block Element</div>
<div class="inline-block">Inline-Block Element</div>

<style>
.inline-block {
    display: inline-block;
    background-color: #dcedc8;
    padding: 10px;
}
</style>

4. display: flex

Elements with display: flex create a flexible container that can align and distribute space among items.

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

<style>
.flex-container {
    display: flex;
    background-color: #f5f5f5;
    padding: 10px;
}
.flex-item {
    background-color: #ffecb3;
    padding: 20px;
    margin: 5px;
}
</style>

5. display: grid

Elements with display: grid create a grid container that can define columns and rows for layout.

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

<style>
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    background-color: #e1bee7;
    padding: 10px;
}
.grid-item {
    background-color: #c5cae9;
    padding: 20px;
}
</style>

Conclusion

The display property is essential for controlling the layout of elements. Understanding how to use different display values allows you to create complex and responsive designs with ease.