1

I am making a calendar using CSS grid and I was curious if it is possible to center the grid items that are pushed to the next row, if that row is not explicitly defined.

Here is an example of code:

#calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
  /* grid-template-rows: repeat(auto-fit, 1fr); */
  justify-content: center;
  min-height: 10vh;
  max-height: 100vh;
  width: 100%;
  padding: 1rem;
}

#calendar>div {
  height: 100px;
  width: 100%;
  border: 2px solid black;
}
<div id="calendar">

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

calendar grid

Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
klaurtar1
  • 700
  • 2
  • 8
  • 29

2 Answers2

0

You may need to use some kind of flex handler. Please try this. and fit it your needs.

html

#calendar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#calendar > div {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

HTML

<div id="calendar">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
Eddwin Paz
  • 2,842
  • 4
  • 28
  • 48
0

Better to use flex rather than grid.

#calendar {
  min-height: 10vh;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendar>div {
  height: 100px;  
    text-align: center;
    flex: 1 0 auto;
  border: 2px solid black;
}
<div id="calendar">

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Miller Cy Chan
  • 897
  • 9
  • 19