csscss-grid

CSS Grid gaps extending beyond width of container

I was practicing CSS GRID when I encountered this problem.

Everything was fine until I added the column-gap property, making my elements go out of the grid container's width.

Here is the image displaying my problem,

column-gap property enabled

column-gap property enabled

If I disable the column-gap property everything seems fine to me.

column-gap property disabled

column gap property disabled

I am not sure if I am doing something wrong or not. Is there any alternative or solution to this?

I want to enable the column-gap property and keep everything within the container.

Need help understanding this.

Thanks for your time and help!!

* {
    box-sizing: border-box;
}

body {
    margin: 20px;
    padding: 0;
}

.container {
    min-height: 500px;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 5rem minmax(10px, auto) 100px;
    row-gap: 10px;
    column-gap: 20px;
}

.el1 {
    background-color: red;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

.el2 {
    background-color: green;
    grid-area: 2 / 1 / 3 / 2;
}

.el3 {
    background-color: blue;
    grid-column: 2 / -1;
    grid-row: 2 / 3
}

.el4 {
    background-color: purple;
    grid-column: 1 / -1;
    grid-row: 3 / -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/index.css" />
    <title>CSS Grid Practice</title>
</head>
<body>
    <div class="container">
        <div class="el1">Element 1</div>
        <div class="el2">Element 2</div>
        <div class="el3">Element 3</div>
        <div class="el4">Element 4</div>
    </div>
</body>
</html>

Solution

  • Your definition of the template columns uses percents, and doesn't take into account the gaps:

    grid-template-columns: repeat(4, 25%);

    Change it to 1fr. The fr unit is a fraction of the available space (after allocating gaps for example):

    grid-template-columns: repeat(4, 1fr);


    * {
  box-sizing: border-box;
}

body {
  margin: 20px;
  padding: 0;
}

.container {
  min-height: 500px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 5rem minmax(10px, auto) 100px;
  row-gap: 10px;
  column-gap: 20px;
}

.el1 {
  background-color: red;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.el2 {
  background-color: green;
  grid-area: 2 / 1 / 3 / 2;
}

.el3 {
  background-color: blue;
  grid-column: 2 / -1;
  grid-row: 2 / 3
}

.el4 {
  background-color: purple;
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}
    <div class="container">
  <div class="el1">Element 1</div>
  <div class="el2">Element 2</div>
  <div class="el3">Element 3</div>
  <div class="el4">Element 4</div>
</div>