Aligning Elements in Grid

7.1 The justify-items Property

CSS Grid Layout gives you powerful tools for handling the alignment of items within the grid. The properties justify-items, align-items, and place-items let you fine-tune how grid items are positioned inside their cells both horizontally and vertically. Let's dive into these properties.

The justify-items property sets the horizontal alignment of all grid items within their cells across the entire grid.

Syntax:

    
      .grid-container {
        justify-items: value;
      }
    
  

Where:

• value: a value that specifies horizontal alignment of items. Possible values are:
  • start: aligns items at the start of the cell
  • end: aligns items at the end of the cell
  • center: centers items inside the cell
  • stretch (default): stretches items to fill the entire width of the cell

Example 1: Aligning to the Start of the Cell

In this example, all items will be aligned to the left edge of their cells:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* All items align to the start of the cell */
      }
    
  

Example 2: Centering Items

In this example, all items will be centered within their cells:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* All items are centered inside the cell */
      }
    
  

7.2 The align-items Property

The align-items property sets the vertical alignment of all grid items within their cells across the entire grid.

Syntax:

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

Where:

• value: a value that specifies vertical alignment of items. Possible values are:
  • start: aligns items at the start of the cell
  • end: aligns items at the end of the cell
  • center: centers items vertically inside the cell
  • stretch (default): stretches items to fill the entire height of the cell

Example 1: Aligning to the Start of the Cell

In this example, all items will be aligned to the top edge of their cells:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* All items align to the top of the cell */
      }
    
  

Example 2: Centering Items Vertically

In this example, all items will be centered vertically within their cells:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* All items are centered vertically inside the cell */
      }
    
  

7.3 The place-items Property

The place-items property is a shorthand for setting both align-items and justify-items at the same time.

Syntax:

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

Where:

• align-value: value for vertical alignment within the cell (align-items)
• justify-value: value for horizontal alignment within the cell (justify-items)

When specifying a single value for the place-items property, like place-items: stretch, items will be aligned in both directions.

Example 1: Centering Items Vertically and Horizontally

In this example, all items will be centered within their cells both horizontally and vertically:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Items are centered both horizontally and vertically */
      }
    
  

Example 2: Stretching Items Vertically and Aligning to the Top Left Corner

In this example, all items will be stretched vertically and aligned to the top left corner of their cells:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Items stretch to full height of the cell and align to the top left corner */
      }
    
  

7.4 Full Implementation Example

Full Implementation Example:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Three equally wide columns */
        grid-template-rows: repeat(3, 100px); /* Three rows of fixed height */
        gap: 10px;
        place-items: center center; /* Centers items 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>Example of Element Alignment in CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Element 1</div>
            <div class="grid-item item2">Element 2</div>
            <div class="grid-item item3">Element 3</div>
            <div class="grid-item item4">Element 4</div>
            <div class="grid-item item5">Element 5</div>
            <div class="grid-item item6">Element 6</div>
          </div>
        </body>
      </html>
    
  

Code Explanation:

• .grid-container: sets up a Grid container with three equally wide columns and three rows of fixed height. Uses the place-items property to center items both horizontally and vertically.
• .grid-item: defines the basic styling for grid items such as background color, text color, padding, text alignment, and border.

1

Task

Frontend SELF EN, level 28, lesson 1

Locked

Vertical Centering

Vertical Centering

Open