1

I made a Codepen: https://codepen.io/coder_extends_human/pen/eLLmgb

So I made a layout consisting of 12 tracks. I floated the exact times of the opening times to the right so it looks fine. I want the opening times to align with the "IMPRESSUM" but the way I did it it doesn't work. I tried to add min-content and max-content to the track including the opening times but it still gets fucked. CSS grid is still very confusing to although I already worked on this issue for 4 hours :(

Thanks in advance

.main {
display: grid;
grid-template-columns: repeat(12, 1fr);}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Coder_extends_human
  • 11
  • 3

2 Answers2

1

Your problem isn't one of Grid; your "Opening Times" and all the times themselves are in a single container element (<section class=five>), and it's that container that's the grid item. The container spans 3 columns (and by the way, you want to remove the explicit width on the section, it's making your element overflow the columns), and the contents then just format normally; they don't care about the outer grid.

So, use ordinary block layout mechanisms. Make the "Opening Times" element a normal block (right now it's being set to inline-block) and use text-align: right on it, as @Batajus suggests.

Using the Dev Tools on your browser should show these facts, and the sizes and positions of your elements, fairly clearly; both Chrome and Firefox will show the grid lines of a grid container (so you can tell that your "Opening Times" element isn't aligning to them in any way).

Xanthir
  • 18,065
  • 2
  • 31
  • 32
0

I hope, I understand your question right and you wanted to text "Opening times" to be aligned with the text "Impressum".

You can do following to get it:

.f3 {
    text-align: right;
    width: 100%; // Set the width to the width of the parent
}
Batajus
  • 5,831
  • 3
  • 25
  • 38