I'm creating a web UI where I have one large area of main information, and three sidebar areas. Two of the sidebars are narrow, and one is wider. On a wide enough display, I want to show them like this:

On a narrow screen, I want to move everything into a single column with the narrow sidebars above the main content, and the wide sidebar underneath:

At the moment, I have the following CSS Grid arrangement for the wide view (utilising Tailwind CSS, so the classes describe the layout):

<div class="grid grid-cols-[3fr_2fr] gap-2">
  <div class="h-64 p-2 bg-amber-300">Main content</div>
  <div> <!-- prevent the right column appearing full height -->
    <div class="grid grid-cols-2 gap-2">
      <div class="h-36 p-2 bg-green-300">Sidebar 1</div>
      <div class="h-36 p-2 bg-blue-300">Sidebar 2</div>
      <div class="col-span-2">
        <div class="h-16 p-2 bg-red-300">Wide sidebar</div>
      </div>
    </div>
  </div>
</div>

Is it possible to achieve the narrow-display, single-column arrangement via, say, order? If not, how can I modify my code to achieve both layouts? I don't have to use Grid - if a different technique (eg flex-box) would allow me to get the desired result, that would be fine.

I'm creating a web UI where I have one large area of main information, and three sidebar areas. Two of the sidebars are narrow, and one is wider. On a wide enough display, I want to show them like this:

On a narrow screen, I want to move everything into a single column with the narrow sidebars above the main content, and the wide sidebar underneath:

At the moment, I have the following CSS Grid arrangement for the wide view (utilising Tailwind CSS, so the classes describe the layout):

<div class="grid grid-cols-[3fr_2fr] gap-2">
  <div class="h-64 p-2 bg-amber-300">Main content</div>
  <div> <!-- prevent the right column appearing full height -->
    <div class="grid grid-cols-2 gap-2">
      <div class="h-36 p-2 bg-green-300">Sidebar 1</div>
      <div class="h-36 p-2 bg-blue-300">Sidebar 2</div>
      <div class="col-span-2">
        <div class="h-16 p-2 bg-red-300">Wide sidebar</div>
      </div>
    </div>
  </div>
</div>

Is it possible to achieve the narrow-display, single-column arrangement via, say, order? If not, how can I modify my code to achieve both layouts? I don't have to use Grid - if a different technique (eg flex-box) would allow me to get the desired result, that would be fine.

• html
• css
• responsive-design
• css-grid

• Have you looked at CSS display: content so all the relevant elements can be treated as if siblings in the two grid layouts? – A Haworth Commented Mar 25 at 19:44
• @AHaworth - ohh, that might really work for me here. Will go away and experiment. – Chowlett Commented Mar 26 at 11:13
• @AHaworth that's actually the exact solution I needed! OverdueOrange's answer stops working the way I want when I drop the absolute height from the sidebars (they grow to half-width). By wrapping the side in a display: contents div, I can keep it as a separate grid context at medium while busting out at small. If you want to write up an answer, I'll transfer the tick over.n (Although I have been told there are some accessibility issues to get around) – Chowlett Commented Mar 27 at 19:12

2 Answers 2

Here’s how you can modify your code:

<div class="grid gap-2 
            md:grid-cols-[3fr_2fr] md:auto-rows-min">

  <!-- Sidebar 1 (First in narrow view, top-left of right column in wide view) -->
  <div class="h-36 p-2 bg-green-300 md:col-start-2 md:row-start-1 sm:order-1">
    Sidebar 1
  </div>

  <!-- Sidebar 2 (Second in narrow view, top-right of right column in wide view) -->
  <div class="h-36 p-2 bg-blue-300 md:col-start-3 md:row-start-1 sm:order-2">
    Sidebar 2
  </div>

  <!-- Main Content (Left column in wide view, below sidebars in narrow view) -->
  <div class="h-auto p-2 bg-amber-300 md:col-start-1 md:row-span-2 sm:order-3">
    Main content
  </div>

  <!-- Wide Sidebar (Spans the bottom of the right column in wide view, full-width in narrow view) -->
  <div class="h-16 p-2 bg-red-300 md:col-start-2 md:row-start-2 md:col-span-2 sm:order-4">
    Wide sidebar
  </div>

</div>

Seems to work.

The layout now seems to work. See this code pen: Tailwind Layout

Ive added comment on the codepen how I think its all working.

Here's what I suggest:

<div class="flex flex-col md:grid gap-4">
<div class="md:flex md:col-start-2 md:row-start-1 gap-4">
    <div class="p-2 h-36 bg-green-300 flex-1 md:col-start-2 mb-4">Sidebar 1</div>
    <div class="p-2 h-36 bg-blue-300 flex-1 md:col-start-2">Sidebar 2</div>
</div>
<div class="p-2 h-64 bg-amber-300 md:col-span-1 md:row-start-1">Main content</div>
<div class="p-2 h-16 bg-red-300 md:col-start-2 md:row-start-1 md:col-span-1 md:mt-40">Wide sidebar</div></div>

I haven't found anything better than md:mt-40 for wide sidebar. Without it, I couldn't align it just below sidebars 1 and 2.

You could set this 40 as a variable because it's the sum of 36 (size of sidebar1 and sidebar2) + the gap.