CODEWITHSUNDEEP
htmlcssgrid
Gary Frewin
Gary Frewin

Reputation: 565

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

I have a 12 column grid. Column 1 is a month number and column 2-12 are a text title.

However, the font of the number is so large that it was forcing the column width to be larger than the other columns. I'm trying to keep equal column width while also not letting the contents of the first column overlap the title text.

To do this, I was hoping I could just align the contents of the first column to the right edge of the column... alas, it's not working.

Codepen

Here is the columns: enter image description here

and this is the div inside column 1 that is holding the H3 number text: enter image description here

How can I get the .date-container div to align it's right edge, to the right edge of it's parent column?

and of course, some code:

.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>

Upvotes: 0

Views: 353

Answers (1)

Warden330
Warden330

Reputation: 1042

Now that i understood this really should fix your problem, it works in your codepen for me.

.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>

Upvotes: 2

Related Questions