Layout

This lesson discusses the layout properties in CSS and how they affect the positioning and arrangement of elements on a web page.

Layout

Display

The display property is used to set the display behavior of an element. The display property can be set to block, inline, inline-block, flex, grid, or none.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="container1">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<div class="container2">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<div class="container3">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the display property. In this example, the display property of the <div> elements is set to block, inline, and flex, creating different display behaviors for the elements.

Flexbox

The flex property is used to set the flex behavior of an element. The flex property can be set to flex-grow, flex-shrink, flex-basis, or a combination of these values.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the flex property. In this example, the flex property of the <div> elements is set to 1, 2, and 1, creating different flex behaviors for the elements.

Grid

The grid property is used to set the grid behavior of an element. The grid property can be set to grid-template-columns, grid-template-rows, grid-gap, or a combination of these values.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
<div class="container1">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

<div class="container2">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

<div class="container3">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
  <div class="item7">Item 7</div>
  <div class="item8">Item 8</div>
  <div class="item9">Item 9</div>
</div>

The code above shows an example of the grid property. In this example, the grid property of the <div> elements is set to 1fr, 2fr, and 1fr, creating different grid behaviors for the elements.

More on Flexbox and Grid

You can learn more about Flexbox and Grid by visiting the following links:

Code Editor