'Is it possible to make grid item span if the next column is free

I have a question is it possible to make grid item to column span when the column next to the grid item is free and in only in this case. If grid item is in row and the next column is occupied or it is end of the screen then item should not be forced to span. I have only one idea to work with media queries and set spanning to this item on each device. Is there a way to do it better? I think about something like minmax(200px, column span 2). I hope you get me.

HTML :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="gridish">
      <div class="square square1"></div>
      <div class="square square2"></div>

      <div class="square square5"></div>
    </div>
  </body>
</html>

css:

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

.gridish {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));

  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.square {
  width: 200px;
  height: 200px;
  background-color: aqua;
}
.square1 {
  background-color: red;
}
.square2 {
  background-color: green;
}
.square3 {
  background-color: purple;
}
.square4 {
  background-color: orange;
}
.square5 {
  width: auto;
  background-color: pink;
  grid-column: span 2;
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions