CSS display property helps to define how any html element to be displayed on any web page;
we can hide and show html element using CSS display property,
depending on what value we set for display property, the web page look will change. display: value;
Here are the different values of css display.
div.ex1 {display: block;} div.ex2 {display: inline;} div.ex3 {display: inline-block;} div.ex4 {display: none;}
Here are some examples of how to apply css display property to any html element.
.ex1 {display: block;} <div class="ex1">display: block</div>
display:none;
.ex1a {display: none;} <div class="ex1">display: block</div>
.ex2 {display: inline;} <span class="ex2">display: inline</span>
.ex3 {display: inline-flexbox;} <div class="ex3">display: inline-flexbox</div>
Here you can see an example of how you can display div side by side using CSS.
.ex4 { display: grid; grid-gap: 10px; grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end]; grid-template-rows: [row1-start] auto [row2-start] auto [row2-end]; background-color: #fff; color: #444; } .a { grid-column: col1-start / col3-start; grid-row: row1-start; } .b { grid-column: col3-start; grid-row: row1-start / row2-end; } .c { grid-column: col1-start; grid-row: row2-start; } .d { grid-column: col2-start; grid-row: row2-start; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } <div class="ex4"> <div class="box a">1</div> <div class="box b">2</div> <div class="box c">3</div> <div class="box d">4</div> </div>
Note, like other CSS display property, grid property will work on only html div element, but other display property like none, block etc can be applied on any html element.