Masonry-style grid with columns in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a masonry-style grid?

A masonry-style grid arranges items in columns where items can have different heights, fitting together like bricks in a wall without fixed rows.

beginner

Which Bootstrap utility helps create a masonry-style grid with columns?

Bootstrap's row-cols-* classes create multiple columns that automatically wrap items, helping build masonry-style layouts.

beginner

How does the <code>row-cols-3</code> class affect a Bootstrap grid?

It divides the row into 3 equal columns, placing grid items into these columns automatically.

beginner

Why is masonry layout useful for images or cards of different heights?

Because it avoids large gaps by stacking items vertically in columns, making the layout look neat and balanced.

intermediate

What role does responsive design play in masonry grids with Bootstrap?

Responsive classes like row-cols-sm-2 or row-cols-lg-4 adjust the number of columns on different screen sizes for better viewing.

Which Bootstrap class creates a 4-column masonry-style grid?

A row-cols-4

B col-4

C masonry-4

D grid-4

The row-cols-4 class divides the row into 4 columns automatically.

What happens if grid items have different heights in a masonry layout?

A They overlap each other

B They force all items to same height

C They stack vertically in columns without gaps

D They create empty rows

Masonry layout stacks items vertically in columns, fitting different heights neatly.

Which Bootstrap class adjusts columns for small screens?

A row-cols-sm-2

B col-sm-2

C row-cols-lg-2

D col-lg-2

row-cols-sm-2 sets 2 columns on small screens and up.

What is the main visual benefit of a masonry grid?

A Items are centered horizontally

B All items have the same width and height

C Items are arranged in fixed rows

D No large vertical gaps between items

Masonry grids reduce vertical gaps by stacking items of varying heights.

Which HTML structure is best for a Bootstrap masonry grid?

A <ul> with <li> items

B <div class='row row-cols-3'> with multiple <div class='col'> items

C <table> with <tr> and <td>

D <section> with <article> items only

Bootstrap masonry grids use a row with row-cols-* and child col elements.

Explain how to create a responsive masonry-style grid using Bootstrap classes.

Think about how Bootstrap handles columns and responsiveness.

Describe why masonry grids are preferred for layouts with items of varying heights.

Imagine fitting different sized bricks in a wall.

Practice

1. What does the Bootstrap class row-cols-3 do in a masonry-style grid?

easy

A. It sets the grid to have 3 rows and 3 columns.

B. It creates a grid with 3 equal-width columns in a row.

C. It adds 3 rows to the grid.

D. It makes each item span 3 columns.

Solution

1. Step 1: Understand the row-cols-* class

   The row-cols-3 class in Bootstrap sets the number of columns per row to 3, making each column take equal width.

2. Step 2: Apply to masonry-style grid

   In a masonry grid, this means items will be arranged in 3 columns, adjusting height but keeping column count fixed.

3. Final Answer:

   It creates a grid with 3 equal-width columns in a row. -> Option B

4. Quick Check:

   row-cols-3 means 3 columns [OK]

Hint: Remember row-cols sets number of columns per row [OK]

Common Mistakes:

• Confusing rows with columns
• Thinking it sets total grid items
• Assuming it controls item height

2. Which of the following is the correct Bootstrap syntax to create a responsive masonry grid with 4 columns on large screens and 2 columns on small screens?

easy

A. <div class='row row-cols-4 row-cols-sm-2'>

B. <div class='row row-cols-lg-4 row-cols-sm-2'>

C. <div class='row row-cols-2 row-cols-lg-4'>

D. <div class='row row-cols-4 row-cols-lg-2'>

Solution

1. Step 1: Understand responsive classes order

   Bootstrap applies classes from smallest to largest breakpoint. So row-cols-2 sets default columns, and row-cols-lg-4 overrides on large screens.

2. Step 2: Check syntax correctness

   <div class='row row-cols-2 row-cols-lg-4'> uses row-cols-2 for small/default and row-cols-lg-4 for large screens, which is correct syntax.

3. Final Answer:

   <div class='row row-cols-2 row-cols-lg-4'> -> Option C

4. Quick Check:

   Default small cols then large override = <div class='row row-cols-2 row-cols-lg-4'> [OK]

Hint: Place smaller breakpoint class before larger breakpoint class [OK]

Common Mistakes:

• Using non-existent classes like row-cols-sm-2 without default
• Reversing breakpoint order
• Mixing up class names

3. Given this Bootstrap markup:

<div class='row row-cols-3 g-3'>
  <div class='col'><div class='card'>Short</div></div>
  <div class='col'><div class='card'>A bit taller content</div></div>
  <div class='col'><div class='card'>Tallest card content here</div></div>
</div>

What will the visual layout look like in the browser?

medium

A. Cards overlapping because of different heights.

B. Three cards stacked vertically in one column.

C. Cards arranged in two columns with uneven widths.

D. Three cards side by side in equal-width columns with different heights stacked evenly.

Solution

1. Step 1: Analyze row-cols-3 and g-3

   The row-cols-3 class creates 3 equal columns. The g-3 adds consistent gaps between columns and rows.

2. Step 2: Understand card heights in masonry

   Cards have different heights but Bootstrap arranges them side by side in columns with gaps, so they do not overlap but appear stacked neatly.

3. Final Answer:

   Three cards side by side in equal-width columns with different heights stacked evenly. -> Option D

4. Quick Check:

   row-cols-3 + g-3 = 3 columns with gaps [OK]

Hint: row-cols sets columns; g-* sets gaps for neat spacing [OK]

Common Mistakes:

• Assuming cards stack vertically by default
• Thinking cards overlap with different heights
• Confusing gaps with padding inside cards

4. You wrote this Bootstrap grid:

<div class='row row-cols-4'>
  <div class='col'>Item 1</div>
  <div class='col'>Item 2</div>
  <div class='col'>Item 3</div>
</div>

But the items appear stretched and not aligned in columns as expected. What is the likely cause?

medium

A. Not enough col items to fill 4 columns causes layout issues.

B. Missing the g-* class to add gaps between columns.

C. The row-cols-4 class only works with cards, not plain divs.

D. The col class must be replaced with col-4 for columns.

Solution

1. Step 1: Check number of columns vs items

   The row-cols-4 expects 4 columns per row. Here only 3 items exist, so the last column is empty, causing stretching or alignment issues.

2. Step 2: Understand Bootstrap behavior with fewer items

   Bootstrap fills columns evenly, but with fewer items than columns, the layout may look uneven or stretched.

3. Final Answer:

   Not enough col items to fill 4 columns causes layout issues. -> Option A

4. Quick Check:

   Items less than columns can cause layout stretch [OK]

Hint: Match number of items to columns for balanced layout [OK]

Common Mistakes:

• Assuming gaps fix alignment issues
• Thinking row-cols-4 only works with cards
• Replacing col with fixed width classes unnecessarily

5. You want to create a masonry-style grid using Bootstrap that adapts to screen size: 1 column on extra small, 2 columns on small, 3 columns on medium, and 4 columns on large screens. Which is the best class combination to achieve this?

hard

A. row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4

B. row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1

C. row row-cols-4 row-cols-3 row-cols-2 row-cols-1

D. row row-cols-1 row-cols-2 row-cols-3 row-cols-4

Solution

1. Step 1: Understand Bootstrap responsive class order

   Bootstrap applies classes from smallest to largest breakpoint. So you start with row-cols-1 for extra small, then override with larger breakpoints.

2. Step 2: Verify class sequence for responsiveness

   row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 correctly lists classes from smallest to largest breakpoint: row-cols-1, row-cols-sm-2, row-cols-md-3, row-cols-lg-4.

3. Final Answer:

   row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 -> Option A

4. Quick Check:

   Responsive classes ordered smallest to largest = row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 [OK]

Hint: Order responsive classes from smallest to largest breakpoint [OK]

Common Mistakes:

• Reversing breakpoint order
• Using only one breakpoint class
• Omitting default column count