The display property in CSS is one of the most important and widely used properties that determines how an element is displayed. By using this property, you can specify whether an element is displayed as a block, inline, flex, or grid. Here, we will introduce and explain some common values of the display property.
We will start with two basic values: block and inline. When an element is defined as a block, it occupies the entire width of its parent element and takes up a full horizontal line. On the other hand, inline elements only take up as much width as their content allows, and will not start on a new line.
In addition to these two states, there are other values that can make elements more attractive and functional. These include flex and grid, which are used for more complex and modern layouts. The flex property gives you the ability to create a responsive layout, while grid is used for creating precise layouts and more complex structures.
In the sample code below, you can see how to use the display property:
<div style="display: block;">This is a block</div>
<span style="display: inline;">This is an inline</span>
<div style="display: flex;">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr);">
<div>Network 1</div>
<div>Network 2</div>
</div>
Line-by-Line Explanation of the Code
<div style="display: block;">This is a block</div> This line indicates a block that will be displayed as a complete element in a single line.
<span style="display: inline;">This is an inline</span> This line shows an inline element that only takes up as much space as its content requires.
<div style="display: flex;"> This line starts a flex container that organizes its content in a flexible format.
<div>Item 1</div> The first item inside the flex container.
<div>Item 2</div> The second item inside the flex container.
<div style="display: grid; grid-template-columns: repeat(2, 1fr);"> This line starts a grid container that consists of two equal columns.
<div>Network 1</div> The first item in the grid.
<div>Network 2</div> The second item in the grid.