Display Property: Block, Inline, Flex, Grid
HTML web page can define block display property in CSS in many ways, where web developers use these block properties more in designing HTML web page layout structure. Where through CSS you can create block element, inline, flex, and grid block properties and make them interact with each other.
So, let’s understand block, inline, flex, and grid display properties better using CSS in HTML web page.
Block display property in CSS.
Block display CSS property using CSS in HTML web page covers the entire width of the block box model available in the web page, starting from a new line in the web page. Where you can define the web page height and width content value content information of a block element created in the web page. Here you can use some popular web page block element tags in HTML web page like <div> tag, <h1> tag, <p> tag, <section> tag, and <article> tag, etc.
Display block property in HTML web page Example.
.blockbox-model {
display: block;
width: 120%; /* display block Full width */
height: 70px; /* display 70px height */
background-color: yellow;
}
inline display property in CSS.
Inline display property in HTML web page CSS covers only that much width in the web page which is required for the inline box content width in the web page. Where this inline display property does not start from a new line, in inline property the web page elements are displayed in a sequence. Where you can custom set the height width and default value attributes of the inline display object as per your requirement. In the inline display block property, some common inline tag elements such as <span> tag, <a> tag, <strong> tag, <em> tag, etc. can be used.
Display inline property in HTML web page Example.
.inlinebox-model {
display: inline;
background-color: aqua;
}
Flex display property in CSS.
The flex display property in HTML web page CSS provides a flexible box layout to the web developer by creating a flex box item container. Where web developers can align and store digital content items inside the flex container. Flexbox provides you with a useful alignment and object store features. In the web page, flexbox is used as an item container in responsive web page structure or layout design, where flex items are aligned in rows and columns in flex.
Display flexbox property in HTML web page Example.
.flexbox-model {
display: flex;
justify-content: space-between; /* display space among flex item */
padding: 20px;
background-color: green;
}
.flexbox-modelitem {
background-color: orange;
width: 40%; /* every flexboxmodel item contain 40% in flex container */
padding: 20px;
}
Grid display property in CSS.
Through CSS in HTML web page, you can create a 2-dimensional grid structure layout, through which you can store digital content in rows and columns in grid box. Grid box model provides web developer with more complex and powerful box model structure than flexbox. Where you can define rows and columns in grid box model, so that you can customize web page layout according to multiple device screen sizes. Gridbox model is a better option for developing complex sections block web structure layout in your web page.
Display gridbox property in HTML web page Example.
.gridbox-model {
display: grid;
grid-template-columns: repeat(4, 1fr); /* it display 4 equal columns */
gap: 20px; /* it display Space between grid item elements */
}
.gridbox-itemmodel {
background-color:teal;
padding: 30px;
}
Block box, inline box, flex box, grid box model display properties example in HTML web page CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Block, Inline, Flex And Grid Box Display Properties Code</title>
<style>
body {
font-size:1.1em;
color: white;
font-family: times new roman;
}
.blockbox-model {
display: block;
width: 120%; /* Display 120 block box width */
height: 40px;
background-color: #2ecc71;
margin-bottom:20px;
margin-top: 10px;
}
.inlinebox-model {
display: inline;
background-color: #f1c40f;
padding: 13px;
margin-top: 8px;
}
.flexbox-model {
display: flex;
justify-content: space-between; /* it add space among flex element */
padding: 20px;
background-color: #5d4037 ;
margin-bottom: 8px;
}
.flexbox-modelitem {
background-color: #e64a19;
width: 30%; /* Each item takes 30% of the container */
padding: 10px;
}
.gridbox-model {
display: grid;
grid-template-columns: repeat(3, 2fr); /* display three equal column in grid */
gap: 10px; /* it display space among grid element */
}
.gridbox-element {
font-family:monotype corsiva;
background-color: #d81b60;
padding: 10px;
}
</style>
</head>
<body>
<div class=”blockbox-model”>You See Block Box Model Preview</div>
<span class=”inlinebox-model”>Windows</span>
<span class=”inlinebox-model”>Linux</span>
<span class=”inlinebox-model”>Apple Mac Os</span>
<br>
<br>
<div class=”flexbox-model”>
<div class=”flexbox-modelitem”>Java</div>
<div class=”flexbox-modelitem”>Python</div>
<div class=”flexbox-modelitem”>Css</div>
</div>
<div class=”gridbox-model”>
<div class=”gridbox-element”>Bootstrap</div>
<div class=”gridbox-element”>JavaScript</div>
<div class=”gridbox-element”>Kotlin</div>
<div class=”gridbox-element”>Html</div>
<div class=”gridbox-element”>Html 5</div>
<div class=”gridbox-element”>Java</div>
</div>
</body>
</html>
Display block property explanation in HTML web page CSS.
- Block model – Block box model covers the entire width in the web page, whereas block box model always starts from a new row. You can use it to create web page layout section structure.
- Inline box model – Inline box model covers only the required box width in the current web page, it does not start from a new line.
- Flex box model – This flex box model is a good option for flexible structure layout for creating items, where flexbox model items are easy to align and adjust. Which can be used for responsive website layout structure.
- Grid Box Model – Provides 2-dimensional layout for complex website layout structure design in existing web page, where rows and columns can be manually custom edited and controlled.
