How to flex-start grid

by | Sep 8, 2024 | Technology

To align items at the start of a grid container, you can use CSS Grid Layout properties to achieve the desired alignment. Here’s how you can align grid items to the start using the grid-template-areas, justify-items, align-items, and justify-content properties, depending on your specific layout needs.

Aligning Grid Items to the Start

  1. Aligning Items Horizontally (Along the Inline Axis)

    To align grid items to the start of the grid container horizontally, you can use the justify-items property for alignment within individual grid cells or justify-content for alignment of the entire grid within the container.

    css
    .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: start; /* Align items to the start of their grid cells horizontally */
    }

    .grid-item {
    /* Styles for grid items */
    }

    Alternatively, you can use justify-content to align the entire grid within the container.

    css
    .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: start; /* Align the grid itself to the start of the container horizontally */
    }
  2. Aligning Items Vertically (Along the Block Axis)

    To align grid items to the start of the grid container vertically, you can use the align-items property for alignment within individual grid cells or align-content for alignment of the entire grid within the container.

    css
    .grid-container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    align-items: start; /* Align items to the start of their grid cells vertically */
    }

    .grid-item {
    /* Styles for grid items */
    }

    Alternatively, you can use align-content to align the entire grid within the container.

    css
    .grid-container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    align-content: start; /* Align the grid itself to the start of the container vertically */
    }

Example

Here’s a complete example showing how to align grid items to the start of the grid container both horizontally and vertically:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Alignment</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px; /* Optional: add some space between grid items */
justify-items: start; /* Align items to the start horizontally */
align-items: start; /* Align items to the start vertically */
/* Optional: use justify-content and align-content if needed */
/* justify-content: start; */
/* align-content: start; */
}

.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>

In this example:

  • justify-items: start; aligns grid items to the start of their grid cells horizontally.
  • align-items: start; aligns grid items to the start of their grid cells vertically.

Adjust the properties based on your layout requirements to achieve the desired alignment.

×
Sign in
Sign up

Sign In

Sign Up