Multicolor CSS Panels with a Responsive Grid Layout

Give each content area its own background

A multicolor background can mean several distinct panels rather than a continuous blend. When each colored area has its own heading and paragraph, create real elements and set a background color on each one. CSS Grid can arrange those elements into columns while preserving their order in the document. A gradient alone cannot provide four independently readable content sections.

The following example presents four stages of a workshop. The headings communicate the stages, so color is decorative reinforcement rather than the only way to identify an item. On a wider screen the panels form two columns. On a narrower screen they become one column in the same reading order: plan, make, review, then share.

Write the content in the intended reading order

<div class="color-panels">
  <section class="color-panel plan">
    <h2>1. Plan</h2><p>Choose the problem and agree on the outcome.</p>
  </section>
  <section class="color-panel make">
    <h2>2. Make</h2><p>Build a small example that demonstrates the idea.</p>
  </section>
  <section class="color-panel review">
    <h2>3. Review</h2><p>Check the result with someone who will use it.</p>
  </section>
  <section class="color-panel share">
    <h2>4. Share</h2><p>Explain what changed and what still needs work.</p>
  </section>
</div>

.color-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
  background: #ffffff;
}
.color-panel {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #64748b;
  border-radius: .5rem;
  color: #172033;
  font: 1rem/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.color-panel h2 { margin-top: 0; line-height: 1.25; }
.color-panel p { margin-bottom: 0; }
.plan { background-color: #dbeafe; }
.make { background-color: #dcfce7; }
.review { background-color: #fef3c7; }
.share { background-color: #fce7f3; }
@media (max-width: 40rem) {
  .color-panels { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .color-panel { border-color: CanvasText; }
}

The grid’s gap creates sixteen pixels of white space between neighboring panels. Padding adds a separate sixteen-pixel inset around the whole group. Changing the gap does not change the inner padding of each panel. Keep those three spacing decisions distinct when reproducing a design: the group’s outer inset, the space between panels, and the content padding inside each panel.

Let text determine the row height

The columns use a zero minimum track size so long content does not force them beyond the available width. The panels also allow long words to wrap. There is no fixed row height, clipping or line clamp. If the review paragraph needs more explanation, its row grows to accommodate it. The neighboring panel can be taller than its own text because Grid stretches items by default.

Do not use manual placement or the order property merely to make the colors appear in a preferred sequence. Moving only the visual position can separate the screen arrangement from the reading and keyboard order. In this example, changing the intended workshop sequence means changing the HTML order and its numbered headings together.

Choose the breakpoint by the content

The forty-rem breakpoint is a practical choice for these short paragraphs, not a universal boundary between phones and computers. Resize the page until the two-column version feels cramped, then choose a breakpoint that gives your actual text enough space. Longer translations, larger default fonts or an additional control inside each panel may justify switching to one column sooner.

At two hundred percent text size, check that every heading and paragraph remains visible. A panel is allowed to become tall; losing words to a fixed-height box is the problem. Keep any buttons or links inside the correct section, give them meaningful labels, and retain their normal keyboard focus indicators. A static colored panel should not look clickable unless it contains a real interactive element.

Use the Grid generator for the layout scaffold

In the CSS Grid Generator, try two columns, two rows and a gap of sixteen pixels. Its preview shows four numbered items and its output supplies grid declarations. A second recipe with one column, four rows and a gap of twenty-four pixels demonstrates how the arrangement changes. The tool does not generate this article’s content, panel colors or responsive media query.

When adapting its output, use the content-sized rows and the minmax column rule shown here, then add the mobile rule to your stylesheet. The browser chooses between the layouts according to the available viewport width; the static generator preview does not publish that switch for you. For the underlying concepts, see MDN’s Grid layout guide.

If the colors should blend across a single decorative banner instead of belonging to separate sections, use the four-stop gradient background. Keep the decision tied to the content: separate sections need real markup, while a purely decorative blend can remain one background image.

Related guides

Make a Multicolor CSS Background with Four Color Stops

Build a four-color CSS background, place its stops deliberately, keep text on a readable surface, and adjust the direction without changing the markup.

Minify CSS While Preserving Its Actual Behavior

Minify a stylesheet, retain meaningful spacing and license notices, and compare the generated CSS with the source before deploying the result.

Format CSS for Readability Without Changing the Cascade

Reformat CSS with a chosen indentation width, inspect nested rules and literal values, and separate readable layout from syntax or design validation.