Bootscript Module 10

  Module 10 : Nesting Grids & Offsetting Columns. 

1. concepts 

2.1 What is “nesting” a grid?

Nesting means placing a new grid structure (rows/columns or grid container) inside a column or cell of a parent grid. It allows complex layouts built from simple repeating patterns (e.g., a two-column card grid, where each card internally has a header, content, and two-column footer).

Why nest?

Composition: build complex components from smaller grids.

Encapsulation: inner layout independent of outer layout.

Responsiveness: inner layout can behave differently at breakpoints.

Key principle: When nesting you re-establish a new grid context inside a column; the nested grid must create its own rows/columns (Bootstrap: a .row inside .col-*; CSS Grid: a display: grid on the child container).

2.2 What is “offsetting”?

Offsetting moves a column to the right by leaving empty column(s) before it. Offsets are widely used to center columns, create gutters, or create asymmetrical designs. In CSS Grid, offsets correspond to starting column placement (grid-column-start / grid-column), or using auto margins or empty tracks.

Key idea: Offsets should not be used to hack layout (e.g., to correct broken markup). Use offsets to align layout and preserve semantic flow.

2.3 Bootstrap grid vs CSS Grid — conceptual differences

Bootstrap grid is a 12-column system based on Flexbox in v4/v5. It uses .container → .row → .col-*. Nesting requires creating .row inside a .col-* again.

CSS Grid is a two-dimensional layout system. It offers explicit control over rows and columns, named areas, and grid lines. Nesting is simply another display: grid on child container; there is no fixed column count unless you define it.

Tradeoffs:

Bootstrap is great for predictable responsive patterns and fast development.

CSS Grid offers fine-grained control for complex 2D layouts (e.g., asymmetrical grids, overlapping items).

3.1 Nesting with Bootstrap (v4/v5 style)

Create a .container (or .container-fluid).

Add a .row.

Inside .row, put .col-* elements.

To nest, inside a .col-*, create another .row and child .col-* elements.

Always keep .row directly wrapping .col- elements; .row sets negative margins that .col- compensate with padding.

Important notes:

When nesting, the nested .row automatically stretches to full width of the parent .col- (with its own gutters). If you want different spacing, use utility classes or custom CSS.

Avoid placing .row directly without .col-* inside a .container — rows require col children.

3.2 Offsetting with Bootstrap

Use .offset-{breakpoint}-{n} to shift a column right by n columns at a given breakpoint. Example: .offset-md-2.

To center a column of width w, use .mx-auto on the column or use offsets: if width is col-md-6, set offset-md-3 (because 3+6+3 = 12).

3.3 Nesting with CSS Grid

Parent: display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; (or use fractions/pixels).

Child element in a grid cell: any element can be a new grid: display: grid; grid-template-columns: 1fr 1fr; gap: 8px;.

Use grid-column: 1 / -1 to make a nested element span full width; use grid-column: 2 / 10 for precise offsets.

3.4 Offsetting with CSS Grid

Use grid-column-start: e.g., grid-column: 4 / span 6; starts at column 4 and spans 6 columns.

Alternatively, use empty grid tracks (empty <div> or pseudo-elements) as gutters, or use justify-self / justify-items for alignment and margin-left: auto to push items.

4. examples 

4.1 Bootstrap nested grid example

 (HTML + inline comments)

<!-- Bootstrap-style nested grid --> <div class="container"> <div class="row"> <div class="col-md-8"> <h2>Main area (col-md-8)</h2> <!-- Nested row inside the 8-column parent --> <div class="row"> <div class="col-sm-6"> <div class="card p-3"> <h5>Nested left (col-sm-6)</h5> <p>Content...</p> </div> </div> <div class="col-sm-6"> <div class="card p-3"> <h5>Nested right (col-sm-6)</h5> <p>More content...</p> </div> </div> </div> <!-- /.row (nested) --> </div> <!-- /.col-md-8 --> <div class="col-md-4"> <h3>Sidebar (col-md-4)</h3> </div> </div> <!-- /.row --> </div> <!-- /.container -->

Notes: The nested .row creates its own 12-column grid relative to the .col-md-8 width. The nested .col-sm-6 are 6/12 of that parent’s width (i.e., each ~50% of the .col-md-8).

4.2 Bootstrap offset example

<div class="container"> <div class="row"> <!-- centered column: col-md-6 with offset-md-3 (3 + 6 + 3 = 12) --> <div class="col-md-6 offset-md-3"> <div class="p-4 border"> Centered content with offset-md-3 </div> </div> </div> </div>

Alternative: <div class="col-md-6 mx-auto"> which centers the column using auto margins.

4.3 CSS Grid nested example (explicit 12-column grid)

<!-- CSS Grid: parent 12-column --> <div class="grid-parent"> <div class="main">Main content (col 1..8)</div> <div class="sidebar">Sidebar (col 9..12)</div> </div> <style> .grid-parent { display: grid; grid-template-columns: repeat(12, 1fr); /* 12 equal tracks */ gap: 16px; } .main { grid-column: 1 / span 8; /* columns 1..8 */ } .sidebar { grid-column: 9 / span 4; /* columns 9..12 */ } /* Nested grid inside .main */ .main .nested { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } </style> <!-- HTML for nested area --> <div class="main"> <div class="nested"> <div>Nested 1</div> <div>Nested 2</div> </div> </div>

4.4 CSS Grid offset example (placing an item at column start 4)

<div class="grid-parent"> <div class="item-offset">I start at col 4 and span 6</div> </div> <style> .grid-parent { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .item-offset { grid-column: 4 / span 6; } /* starts on line 4 */ </style>

5. Exercises 

Exercise 1 — Bootstrap: Nested cards layout

 Build a 2-column main area (left: 8 columns, right: 4 columns). Inside the left area create a nested 3-column grid that stacks on small screens and displays three equal columns on medium+ screens. Each nested column should be a card with header/content/footer.

Solution (key parts):

<div class="container"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-4 col-12"> <div class="card">Card 1</div> </div> <div class="col-md-4 col-12"> <div class="card">Card 2</div> </div> <div class="col-md-4 col-12"> <div class="card">Card 3</div> </div> </div> </div> <div class="col-md-4">Sidebar</div> </div> </div>

Why it works: The nested .row inside .col-md-8 gives a 12-column space limited to the width of the parent .col-md-8. The nested .col-md-4 occupy 4/12 each: so three fit. col-12 ensures stacking on small screens.

Exercise 2 — Bootstrap: Centering with offset

Create a centered call-to-action section where the CTA box is col-lg-4 and centered on large screens using offsets.

Solution:

<div class="container"> <div class="row"> <div class="col-lg-4 offset-lg-4"> <div class="cta">Call to action</div> </div> </div> </div>

On large screens, 4 columns wide with offset 4 means left gap = 4 columns, content = 4, right gap = 4 → centered.

Exercise 3 — CSS Grid: Complex nested & offset layout

 Create a 12-column CSS Grid. Place a banner spanning all columns, then a content area where the main content is grid-column: 2 / span 8 (i.e., offset by 1 column), and inside main content create a nested two-column layout where the first nested column is 2/3 width.

Solution (essentials):

.parent { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .banner { grid-column: 1 / -1; } .main { grid-column: 2 / span 8; } /* starts at 2, spans 8 -> columns 2..9 */ .main .nested { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }

Why: grid-column: 2 / span 8 is an offset for the main content (one empty track on left). The nested grid defines fractional columns for the 2:1 split.

Exercise 4 — Challenge 

 You have a nested row but gutters look twice as big than the outer row. Why? Fix it.

Explanation & Fix: Bootstrap .row uses negative margins and .col-* uses padding to create gutters. If you place a .row directly inside another .row without wrapping it in a .col-*, the negative margins will escape the expected parent and you’ll see layout breakage and doubled gutters. Fix: always put the nested .row inside a .col-*. If you need a zero-gutter nested row, use .gx-0 in Bootstrap v5 or custom CSS to remove gap.

6. tips

Source order vs visual placement: Be mindful: CSS Grid allows you to place items visually without changing DOM order. For accessibility (screen readers, keyboard navigation), prefer source order matching logical reading order; use CSS reorder with care.

Performance: Nesting many grids increases layout complexity. Keep nesting depth reasonable; prefer flexbox for one-dimensional flows and CSS Grid when two-dimensional control is needed.

Debugging: Use browser devtools (grid overlay in Chrome/Firefox) to inspect grid lines, track sizes, and placement. Toggle grid/highlight to see explicit tracks.

Responsive strategy: Define breakpoints and change nested layout at breakpoints — in Bootstrap via col-sm, col-md etc.; in CSS Grid via media queries adjusting grid-template-columns.

Gutters control: In Bootstrap use spacing utilities (gx-*, gy-*) or custom CSS. In CSS Grid use gap.

Subgrid: subgrid can inherit parent tracks (supported in some browsers). Useful for aligning nested columns to parent's track sizes — mention as advanced topic.

Use semantic markup (articles, sections) inside grid cells to keep HTML meaningful.

9. Assessment 

Correctness (40%) — Layout matches specification across breakpoints.

Responsiveness (25%) — Works and degrades gracefully on narrow screens.

Accessibility & semantics (15%) — Proper element types, source order logical.

Code quality (10%) — Clean, commented, using utility classes wisely.

Advanced use (10%) — Use of CSS Grid features (grid-column, named areas, subgrid) where appropriate.

8. Build a dashboard page:

Header spanning full width.

Two-column content: left main (8 columns) with nested card grid (cards vary in grid span), right sidebar (4 columns).

One card must be centered via offsets on large screens and full-width on mobile.

Implement both a Bootstrap version and a CSS Grid version. Compare pros/cons (submit short write-up).

Deliverables:

HTML/CSS files for both implementations.

Short write-up (300–500 words) discussing decisions, mobile behavior, and accessibility considerations.

9. research

 Topics

CSS Grid Level 1 & Level 2 (explicit vs implicit grid, grid-auto-flow)

Subgrid feature and browser support

Bootstrap grid system internals (gutters, negative margins)

Source order / focus order vs visual order

Responsive design patterns: container queries (emerging), intrinsic sizing

“CSS Grid Layout” — MDN Web Docs (authoritative spec-style)

“Responsive Web Design” — Ethan Marcotte (foundational book)

“Designing with Web Standards” — Jeffrey Zeldman (semantics & accessibility)

10. Common pitfalls checklist 

❌ Putting .row outside of .col-* in Bootstrap.

❌ Using offsets to correct broken markup instead of fixing DOM structure.

❌ Breaking source order and losing keyboard/focus flow.

❌ Too-deep nesting causing unexpected overflow or performance issues.

✅ Always check nested grid width — nested columns are relative to their parent column.

11. reference 

Bootstrap

Nest: .col-?-n > .row > .col-?-m

Offset: .offset-{breakpoint}-{n}

Center: .col-md-6.mx-auto or .col-md-6.offset-md-3

Remove gutters (v5): add .gx-0 to .row

CSS Grid

Parent 12 col: grid-template-columns: repeat(12, 1fr)

Place item: grid-column: start / end or grid-column: 4 / span 6

Span full width: grid-column: 1 / -1

Nested: call display:grid on child