Grid Container Alignment

8.1 The justify-content Property

CSS Grid Layout gives you powerful tools for handling the alignment of the entire grid container within the available space. The justify-content, align-content, and place-content properties let you control the alignment of rows and columns inside the container, offering flexibility and precision in crafting layouts.

The justify-content property manages the horizontal alignment of the entire grid within the container. This property is useful when the container size is larger than the required width of the grid itself.

Syntax:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Where: value can be any of the following:

• start: aligns the grid to the start of the container
• end: aligns the grid to the end of the container
• center: centers the grid within the container
• stretch: stretches the grid to fill the whole container
• space-around: places equal space around each item
• space-between: places equal space between items
• space-evenly: places equal space between items and edges of the container

Example 1: Aligning to the Start of the Container

In this example, all content will be aligned to the left edge of the container:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Aligns content to the left edge of the container */
      }
    
  

Example 2: Centering Content

In this example, all content will be centered within the container:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Centers content within the container */
      }
    
  

8.2 The align-content Property

The align-content property defines how the grid content is aligned along the vertical axis inside the grid container. It's useful when the grid doesn't fill the entire available vertical space.

Syntax:

    
      .grid-container {
        align-content: value;
      }
    
  

Where: value is the setting for vertical content alignment. Possible values include:

• start: aligns content to the start of the container
• end: aligns content to the end of the container
• center: centers content within the container
• space-between: places equal spacing between items
• space-around: places equal spacing around each item
• space-evenly: places equal spacing between items and container edges
• stretch (default): stretches content to fill all available space

Example 1: Aligning to the Start of the Container

In this example, all content will be aligned to the top edge of the container:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Aligns content to the top edge of the container */
      }
    
  

Example 2: Centering Content

In this example, all content will be centered within the container:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Centers content within the container */
      }
    
  

8.3 The place-content Property

The place-content property is a shorthand for setting both justify-content and align-content at once.

Syntax:

    
      .grid-container {
        place-content: justify-value align-value;
      }
    
  

Where:

• justify-value: horizontal alignment value (justify-content)
• align-value: vertical alignment value (align-content)

Example 1: Centering Content Horizontally and Vertically

In this example, all content will be centered within the container both horizontally and vertically:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Centers content both horizontally and vertically */
      }
    
  

Example 2: Stretching Content Across Width and Aligning to Top Edge

In this example, the content will be stretched across the width of the container and aligned to the top edge:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Stretches content across the width and aligns to the top edge */
      }
    
  

8.4 Full Implementation Example

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Three columns with fixed width */
        grid-template-rows: repeat(3, 100px); /* Three rows with fixed height */
        gap: 10px;
        place-content: center center; /* Centers content both horizontally and vertically */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Grid Container Alignment Example</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Item 1</div>
            <div class="grid-item item2">Item 2</div>
            <div class="grid-item item3">Item 3</div>
            <div class="grid-item item4">Item 4</div>
            <div class="grid-item item5">Item 5</div>
            <div class="grid-item item6">Item 6</div>
          </div>
        </body>
      </html>
    
  

Code Explanation:

• .grid-container: creates a Grid container with three columns of fixed width and three rows of fixed height. Uses the place-content property to center content both horizontally and vertically
• .grid-item: specifies basic styles for grid items, such as background color, text color, padding, text alignment, and border

1

Task

Frontend SELF EN, level 28, lesson 2

Locked

Content Stretch

Content Stretch

Open

1

Task

Frontend SELF EN, level 28, lesson 2

Locked

Centering Content

Centering Content

Open