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

Html – How do i get space between of elements when using grid in css

I’m new to grid and am trying to get space between two elements. While using align-content: space-between; i get the expected result but when I use justify-content: space-between; nothing happens

How would I change the CSS to get the expected result?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(143, 123, 123, 0.4);
}

.container {
  border: 2px solid black;
  border-radius: 5px;
  height: 60%;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between;
  /* below is the problem that I am having, I assume that there is supposed to be space between the elements but its not working */
  justify-content: space-between;
}

.container .brightness {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .saturation {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .inversion {
  width: 70px;
  height: 70px;
  background-color: black;
}

.container .grayscale {
  width: 70px;
  height: 70px;
  background-color: black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>stackoverflow questions</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="brightness"></div>
    <div class="saturation"></div>
    <div class="inversion"></div>
    <div class="grayscale"></div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    one thing you can do, add these styles to the saturation and grayscale squares if you want them to be at the end of the container or else if you want to give a custom gap between them you can do so using the gap property.

    .container .saturation{
        width: 70px;
        height: 70px;
        background-color: black;
        display: grid;
        justify-self: end;
    }

.container .grayscale{
    width: 70px;
    height: 70px;
    background-color: black;
    display: grid;
    justify-self: end;
}
    Login or Signup to reply.
  2. 0

    It seems like there’s a misunderstanding of how align-content and justify-content work in the context of a grid container.

    • align-content works along the block axis (vertically for a row-based grid).

    • justify-content works along the inline axis (horizontally for a row-based grid).

    In your case, since you have set grid-template-columns in your container, it’s a row-based grid. Therefore, align-content: space-between; will affect the vertical spacing, and justify-content: space-between; will not have a visible effect.

    If you want space between the columns, you should adjust the grid-column-gap property in your container class:

    .container {
  border: 2px solid black;
  border-radius: 5px;
  height: 60%;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between; /* This affects vertical spacing */
  grid-column-gap: 10px; /* Adjust this value to set the horizontal space between columns */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search