1. Display Property

The display property determines how elements are rendered in terms of layout.

1.1 Block

Block elements take up the full width available and start on a new line.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Display Example</title>
    <style>
        .block-element {
            display: block;
            width: 100%;
            background-color: lightblue;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="block-element">Block Element</div>
    <div class="block-element">Another Block Element</div>
</body>
</html>

1.2 Inline

Inline elements do not start on a new line and only take up as much width as necessary.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Display Example</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
    <span class="inline-element">Inline Element</span>
    <span class="inline-element">Another Inline Element</span>
</body>
</html>

1.3 Inline-block

Inline-block elements are similar to inline elements but can have width and height.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-block Display Example</title>
    <style>
        .inline-block-element {
            display: inline-block;
            width: 150px;
            height: 100px;
            background-color: lightcoral;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">Inline-block Element</div>
    <div class="inline-block-element">Another Inline-block Element</div>
</body>
</html>

2. Positioning

The position property determines the positioning of elements in relation to their normal position or their containing block.

2.1 Static

Static positioning is the default, where elements are positioned according to the normal flow of the document.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Positioning Example</title>
    <style>
        .static-element {
            position: static;
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="static-element">Static Positioned Element</div>
</body>
</html>

2.2 Relative

Relative positioning allows you to move an element relative to its normal position using top, right, bottom, and left properties.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relative Positioning Example</title>
    <style>
        .relative-element {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="relative-element">Relative Positioned Element</div>
</body>
</html>

2.3 Absolute

Absolute positioning removes the element from the normal document flow and positions it relative to the nearest positioned ancestor.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Positioning Example</title>
    <style>
        .absolute-container {
            position: relative;
            height: 200px;
            background-color: lightgray;
        }
        .absolute-element {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="absolute-container">
        <div class="absolute-element">Absolute Positioned Element</div>
    </div>
</body>
</html>

2.4 Fixed

Fixed positioning keeps the element in a fixed position relative to the viewport.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Positioning Example</title>
    <style>
        .fixed-element {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="fixed-element">Fixed Positioned Element</div>
</body>
</html>

2.5 Sticky

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative until it crosses a specified threshold, then it behaves as fixed.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Positioning Example</title>
    <style>
        .sticky-element {
            position: sticky;
            top: 0;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="sticky-element">Sticky Positioned Element</div>
    <p>Scroll down to see the sticky element stick to the top.</p>
    <!-- Add more content here to enable scrolling -->
</body>
</html>

3. Flexbox

Flexbox is a layout model that allows you to design complex layouts with a more efficient and flexible approach.

3.1 Flex Container

The flex container is the parent element that holds the flex items.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Container Example</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-around;
            background-color: lightblue;
            padding: 10px;
        }
        .flex-item {
            background-color: lightcoral;
            padding: 20px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

3.2 Flex Items

Flex items are the children of the flex container and can be controlled with various flex properties.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Items Example</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
        .flex-item {
            flex: 1;
            background-color: lightcoral;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

3.3 Flex Properties

  • flex-direction: Defines the direction in which flex items are placed in the flex container.
  • justify-content: Aligns flex items along the main axis.
  • align-items: Aligns flex items along the cross axis.
  • flex-wrap: Defines whether flex items should wrap onto multiple lines.

4. Grid Layout

Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts with rows and columns.

4.1 Grid Container

The grid container is the parent element that defines the grid structure.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Container Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: lightblue;
            padding: 10px;
        }
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</body>
</html>

4.2 Grid Items

Grid items are the children of the grid container and can span multiple rows or columns.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Items Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            gap: 10px;
        }
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
        .item1 {
            grid-column: span 2;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">Item 1 (spans 2 columns)</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</body>
</html>

4.3 Grid Properties

  • grid-template-columns: Defines the number and size of columns in the grid.
  • grid-template-rows: Defines the number and size of rows in the grid.
  • grid-column: Specifies the start and end positions of a grid item in a column.
  • grid-row: Specifies the start and end positions of a grid item in a row.