0

I know how to design elements with equal height inside grid items within a CSS grid layout (1) and as well how to design a responsive grid layout with no media queries (2). But how to combine both, (1) and (2), in one layout: Equal height children inside a responsive CSS grid without media queries? Below snippet represents a working version of (1), but in the line grid-template-columns: repeat(3, minmax(11em, 1fr)) the function minmax(), which should add responsiveness, is ignored. How is it possible to achieve the desired layout?

main {
  display: grid;
  grid-template-rows: auto auto;
  /* minmax() isn't working */
  grid-template-columns: repeat(3, minmax(11em, 1fr));
  grid-auto-flow: column;
  grid-gap: 0 1em;
}

section {
  display: contents;
}

header {
  background: yellow;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  padding: 1em;
}

p {
  background: red;
  padding: 1em;
}
<main>
  <section>
    <header>Header #1</header>
    <p>Ac! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </section>
  <section>
    <header>Header #2</header>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </section>
  <section>
    <header>Header #3<br>is so much<br>longer</header>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  </section>
</main>
Madamadam
  • 842
  • 2
  • 12
  • 24
  • What is wrong with media queries, they are an essential part of web design. Refusing to use them is not logical. – Paulie_D Feb 27 '21 at 21:34
  • In modern webdesign, we tend to think "components" rather than "pages". Components should fit into any context of varying widths/heights, but media queries "adjust things according to the constant that is the viewport" … read more about this perspektive at https://blog.logrocket.com/flexible-layouts-without-media-queries/ I can't use media queries because I'm coding for a "local" context, not a "page" context. – Madamadam Feb 27 '21 at 21:54

0 Answers0