Html Question posted in
Some basic documentation can be found here.

Html – CSS grid-template-columns and grid-template-rows without empty spaces

Im trying to get multiple divs with diffrenent heights to use their given space.

The problem within my example is that there are still some empty space wich is not filled.

enter image description here

My Code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimal Grid Layout with Variable Heights</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
            gap: 10px;
            height: 100vh;
            padding: 10px;
            box-sizing: border-box;
            grid-auto-flow: dense;
        }
        .item {
            background-color: lightblue;
            border: 1px solid #000;
            padding: 20px;
            text-align: center;
            box-sizing: border-box;
        }
        .item:nth-child(1) {
            height: 150px;
        }
        .item:nth-child(2) {
            height: 200px;
        }
        .item:nth-child(3) {
            height: 250px;
        }
        .item:nth-child(4) {
            height: 300px;
        }
        .item:nth-child(5) {
            height: 350px;
        }
        .item:nth-child(6) {
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    To create a CSS grid layout without empty spaces using grid-template-columns and grid-template-rows, you need to ensure that all the grid items are properly placed within the defined grid areas. This can be achieved by either explicitly placing the items using grid lines or allowing the grid to auto-place the items. Here are some examples demonstrating these concepts.

    Example 1: Explicit Grid Placement
    In this example, each grid item is explicitly placed in a specific cell using grid-column and grid-row.

    html

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 20px;
  }
  .item1 { grid-column: 1; grid-row: 1; }
  .item2 { grid-column: 2; grid-row: 1; }
  .item3 { grid-column: 3; grid-row: 1; }
  .item4 { grid-column: 1; grid-row: 2; }
  .item5 { grid-column: 2; grid-row: 2; }
  .item6 { grid-column: 3; grid-row: 2; }
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>
</div>

</body>
</html>

    Example 2: Auto-Placement with Grid Auto Flow
    In this example, grid items are automatically placed into the grid without specifying grid lines. The grid-auto-flow property is used to control the auto-placement.

    html

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: auto;
    grid-auto-flow: row; /* Items fill rows first, then move to the next row */
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 20px;
  }
</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>

    Example 3: Responsive Grid with Media Queries
    This example demonstrates how to create a responsive grid layout that adapts to different screen sizes without empty spaces.

    html

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Grid</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 20px;
  }
</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, grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); ensures that the grid items fill the available space and wrap to the next row as needed, maintaining a responsive layout without empty spaces.

    These examples should help you create a CSS grid layout that efficiently uses space without leaving gaps or empty spaces.

    Login or Signup to reply.
  2. 0

    If I understand you correctly you just want to change height to min-height.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimal Grid Layout with Variable Heights</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
            gap: 10px;
            height: 100vh;
            padding: 10px;
            box-sizing: border-box;
            grid-auto-flow: dense;
        }
        .item {
            background-color: lightblue;
            border: 1px solid #000;
            padding: 20px;
            text-align: center;
            box-sizing: border-box;
        }
        .item:nth-child(1) {
            min-height: 150px;
        }
        .item:nth-child(2) {
            min-height: 200px;
        }
        .item:nth-child(3) {
            min-height: 250px;
        }
        .item:nth-child(4) {
            min-height: 300px;
        }
        .item:nth-child(5) {
            min-height: 350px;
        }
        .item:nth-child(6) {
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search