Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 08 / 12

Grid: relationships in two dimensions

The three cards need consistent columns with room for growing text.

Learning paths14 min

Let's discover together

  1. 1

    Display:grid arranges direct children in rows and columns. Grid-template-columns:1fr 1fr creates two columns sharing available space; gap reserves space between them before that distribution.

  2. 2

    Repeat(3,minmax(0,1fr)) creates three flexible tracks with an explicit zero minimum. It helps shrinking, but text and children must also wrap. It does not guarantee every possible content will fit.

  3. 3

    The workshop shows computed column widths. Compare two and three columns. A 600px container with 20px gaps between three equal columns leaves 560px for the tracks, about 186.67px each.

  4. 4

    Do not rearrange meaningful order only through visual placement. A single column may suit narrow screens better; next we will condition the grid on available space.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Build a simple grid and avoid minimum sizes that cause overflow.

Now it's your turn

Discovery workshop

Predict, change, compare

Three equal columns in 600px, with two 20px gaps.
Build your answers and check when you are ready.
A moment to understand

Does minmax(0,1fr) remove the need to test long text?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Compare two and three columns. Record width, gap and text behavior; choose for readability, not symmetry alone.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.