UNIT 18 • STAGE 5 OF 7
The Courts
Court case cards with flex column layout. New CSS: margin-top: auto pushes significance to card bottom. grid-column: 1 / -1 on the Sioux Nation callout.
The Courts: What We Are Building
Stage 5 adds the court cases that defined what Tribal sovereignty meant in practice during the Self-Determination Era. Legislation gave Tribes new authority. The Supreme Court defined its limits. These four cases, Mancari, Oliphant, Montana, and Mille Lacs, are among the most cited cases in federal Indian law. They are still being argued over today.
The layout is a 2-column grid of case cards, with the Sioux Nation case spanning the full width as a featured callout. You have now used grid-column: 1 / -1 in three consecutive stages: on the Cabazon callout in Stage 3, on the My Nation card in Stage 4, and here. It is one of the most useful single lines of CSS you will write.
Morton v. Mancari (1974), The foundational case
The Bureau of Indian Affairs gave hiring preference to qualified Indians over non-Indians. A non-Indian employee challenged this as racial discrimination. The Supreme Court ruled unanimously that Indian preference in federal programs is not racial discrimination. It is a political classification based on the unique legal status of Tribal nations as quasi-sovereign entities with a special relationship to the federal government. This distinction, political, not racial, is the foundation of all federal Indian law. Every federal law that distinguishes between Indians and non-Indians rests on Mancari.
New CSS: Cases Grid and Case Card
The cases grid is a 2-column layout, the same as the nations grid from Stage 4. Each case card uses display: flex; flex-direction: column. This turns the card into a vertical flex container, which enables the technique in Step 3.
.cases-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 56px;
}
.case-card {
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-radius: 14px;
padding: 32px 28px;
display: flex; /* turns card into a flex container */
flex-direction: column; /* children stack vertically */
gap: 14px;
}
New CSS: margin-top: auto
Each case card has different amounts of text in the ruling section, so cards in the same row will be different heights unless CSS intervenes. The grid already stretches cards to match the tallest in each row. The problem is that the "Significance" block floats at different vertical positions depending on how much ruling text is above it.
margin-top: auto on .case-significance solves this. In a flex column container, margin-top: auto pushes the element all the way to the bottom of its parent, absorbing all remaining vertical space. The significance block always appears at the card's bottom, aligned across cards in the same row.
.case-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 900; line-height: 1.25; color: var(--text-light); }
.case-citation { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.case-ruling { font-size: 0.9375rem; line-height: 1.7; color: var(--text-dim); }
.case-significance {
margin-top: auto; /* pushes to bottom of flex column */
padding-top: 16px;
border-top: 1px solid var(--gold-border);
font-size: 0.875rem; line-height: 1.65; color: var(--text-dim);
}
.case-significance strong { color: var(--text-light); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 4px; }
Why margin-top: auto works here
In a flex container, auto margins absorb all available space in the flex direction. When you set margin-top: auto on the last child of a flex column, it pushes that child to the very bottom. The CSS grid stretches all cards in a row to the same height, so "the bottom" is the same position across every card in that row. Result: perfectly aligned significance blocks without JavaScript or fixed heights.
The Sioux Nation Callout, grid-column: 1 / -1
The Sioux Nation case gets full-width treatment. You just read about Pine Ridge in Stage 4. The connection is direct: the Oglala Sioux Tribe at Pine Ridge is the same nation that won this case, and then refused the money. The callout uses the same pattern as Stages 3 and 4.
grid-column: 1 / -1; /* third time using this, it is yours now */
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-left: 4px solid var(--gold);
border-radius: 0 14px 14px 0;
padding: 40px 40px 40px 36px;
}
.sn-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 8px; }
.sn-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 900; line-height: 1.2; margin-bottom: 16px; }
.sn-body p { font-size: 0.9375rem; line-height: 1.75; color: var(--text-dim); margin-bottom: 0.75em; }
.sn-body p:last-child { margin-bottom: 0; }
Stage 5 Complete!
Five court cases are now on your page. Scroll the preview and check that the Sioux Nation callout spans the full width of the 2-column grid, and that the Significance blocks align to the bottom of each case card row. Stage 6 adds your research section.
© 2026 Relentless Feather. All rights reserved.