1

I suggest running the code snippet below to better understand this question, as it is a layout question, and visually easier to understand.

I have an element on my page that needs to display one item (a Title) aligned to the left, and another item (Date/Time) aligned to the right, in the same "row". I accomplished this easily using CSS Grid.

My designer told me that when we display on a mobile device, it should instead show the Title left-aligned, and the Date/Time below that on the next line, ALSO left-aligned. CSS Flex does this with grace.

Is there a way to make either CSS Grid or CSS Flex do both of these things, without jumping through hoops?

What I'm trying to avoid is having to write a slew of @media breakpoints, and just handle it organically instead, if possible.

Thanks for any advice you can offer.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-weight: bold;
}

.date {
  justify-self: end;
}

.flex-container {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
When on a wide device screen (e.g. Desktop Web Browser) I want the layout to look like this. The title should be on the left and left aligned, the date/time should be on the right and right aligned. The should adjust with the page width.
<p>
  <div class="container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

However, when on a small device screen (e.g. smart phone) the Title should appear on one line, left aligned, and the Date/Time should appear below it, also left aligned.
<p>
  <div class="flex-container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

Is there a way to accomplish this easily, hopefully using CSS Grid or Flex, rather than hard coding CSS changed to breakpoints?
Todd Davis
  • 5,855
  • 10
  • 53
  • 89

1 Answers1

1

Flexbox is really all you need.

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
<div class="container">
  <div>Some Title</div>
  <div class="date">01/26/2021 10:30am</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thank you Michael, this does make Flex handle the single line properly, however when I view it on a small device, it never goes to 2 lines, and doesn't left align both lines. That's what I am trying to accomplish. – Todd Davis Jan 27 '21 at 02:21
  • It will wrap and left align when the screen is small enough ([test here](https://jsfiddle.net/nbq5426f/)). Where would you like it to wrap? – Michael Benjamin Jan 27 '21 at 02:22
  • After the title. If you run the code snippet I posted, it shows exactly how it should look on a wide screen, and exactly how it should look on a small screen. I tried running it in an emulator using an iPhone X profile (it is typically the thinnest width device) and it never "broke" to a new line. Perhaps I just need to set a wider width on the elements? Hmmm.... – Todd Davis Jan 27 '21 at 02:25
  • Well, I know you are trying to avoid media queries, but this job is exactly what they're designed for. Without a media query, the text will wrap based on its content. It has no way of knowing anything else. – Michael Benjamin Jan 27 '21 at 02:28
  • This post may help you. It's the approach I take for responsive web design. https://stackoverflow.com/q/8564752/3597276 – Michael Benjamin Jan 27 '21 at 02:29
  • 1
    @ToddDavis add some padding-right or margin-right to the title so the wrapping is done sooner – Temani Afif Jan 27 '21 at 08:31