将溢出的容器对齐到网格单元的右侧，而不是网格行

Question

我有一个 12 列的网格。第 1 列是月份编号，第 2-12 列是文本标题。

但是，数字的字体太大，迫使列宽大于其他列。我试图保持相等的列宽，同时也不让第一列的内容与标题文本重叠。

为此，我希望我可以将第一列的内容对齐到该列的右边缘...唉，这行不通。

Codepen

这是列：

这是第 1 列内的 div，其中包含 H3 编号文本：

如何让 .date-container div 的右边缘与 parent 列的右边缘对齐？

当然还有一些代码：

.month-title-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 10px;
}

.date-container{
  position: absolute;
}

.date-container h1{
  position: relative;
  text-align: end;
}

.col-1
{
grid-column-end: span 1;
}


<div class="month-title-grid">
<div class="col-12"><h3 class="lightbrown">January</h3></div>
<div class="col-1"><div class="date-container"><h1 class="lightbrown">01</h1></div></div>
<div class="col-11"><h2 class="darkbrown">IT'S COMPLICATED</h2>

Answer 1

现在我明白这真的应该解决你的问题，它对我来说在你的 codepen 中有效。

.month-title-grid {
  display: grid;
  /*this will help to keep the columns even*/
  grid-template-columns: repeat( 12, minmax(50px, 1fr) );
  grid-template-rows: repeat(2, auto);
  column-gap: 10px;
}

.col-1
{
/*this will force the overflow to the left*/
direction: rtl;
grid-column-end: span 1;
}

<div class="month-title-grid">
<div class="col-12"><h3 class="lightbrown">January</h3></div>
<div class="col-1"><div class="date-container"><h1 class="lightbrown">01</h1></div></div>
<div class="col-11"><h2 class="darkbrown">IT'S COMPLICATED</h2>

将溢出的容器对齐到网格单元的右侧，而不是网格行

Align overflowing container to right of grid cell, not grid row

html

css

grid