Breaking News: Grepper is joining You.com. Read the official announcement!

square grid css

Aditya Gautam answered on September 4, 2022 Popularity 9/10 Helpfulness 2/10

answer square grid css

related grid square css

square grid css

Comment

.item{
  background-image: url(https://images.pexels.com/photos/1829979/pexels-photo-1829979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover;
  background-position: center center;
  background-color: whitesmoke;
}
body{
  font-family: Noto Sans, Arial, sans-serif;
  padding: 3em 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
SquareGrid{
 
  --content-width: 80vw;
  --gutter: 40px;
  --columns: 1; 
  --row-size: calc(
    ( var(--content-width) - (var(--gutter) * (var(--columns) - 1))
    ) / var(--columns));
  display: grid;
  width: 100%;
  max-width: var(--content-width);
  
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: var(--row-size);

  grid-column-gap: var(--gutter);
  grid-row-gap: var(--gutter);
}
@media (min-width: 450px){
  SquareGrid{
    --columns: 2;
  }
}
@media (min-width: 750px){
  SquareGrid{
    --columns: 3;
  }
}

@media (min-width: 1200px){
  SquareGrid{
    --columns: 4;
  }
}
<h1>Square Grid</h1>
<SquareGrid>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</SquareGrid>
<h1>Smaller gutter:</h1>
<SquareGrid style="--gutter: 10px">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 
</SquareGrid>

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css grid square

Link to this answer
Share Copy Link

Contributed on Sep 04 2022

Aditya Gautam

0 Answers Avg Quality 2/10

Closely Related Answers

grid square css

Comment

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

Popularity 9/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css grid

Link to this answer
Share Copy Link

Contributed on Mar 14 2023

Liz

0 Answers Avg Quality 2/10

square grid css

Contents

More Related Answers

square grid css

Closely Related Answers

grid square css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.