Alignment of div based on other div elements

July 1, 2022

I am having a problem aligning two divs which are contained inside of a parent div. This is currently what the alignment looks like:

However, I would like each letter to be alligned which each number as opposed to each div being centered by their own lengths.

Here is the HTML and CSS associated with the picture. Any help is greatly appreciated!

.inner {
    resize:none;
    width: 100%;
    height: 100%;
    background-color: rgb(200, 200, 200);
    border-radius: 20px;
    align-items: center;
}
.days {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}
.nums {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}

<div class="inner">
    <div class="days">
    </div>
    <div class="nums">
    </div>
</div>

>Solution :

Would be way easier to just use CSS Grid.

Create a 7 column grid with: grid-template-columns repeat(7, value);

To have the columns only as wide as the largest content within the column you can use min-content.

To center the text you just use `text-align: center´

.inner {
  display: grid;
  grid-template-columns: repeat(7, min-content);
  grid-gap: 10px;
}

inner>span {
  text-align: center;
}

<div class="inner">
  <!-- days -->
  <span>S</span>
  <span>S</span>
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  
  <!-- nums -->
  <span>25</span>
  <span>26</span>
  <span>27</span>
  <span>28</span>
  <span>29</span>
  <span>10</span>
  <span>1</span>
</div>