Grid Layout Customizer

Columns:

Column Unit: fr (Fraction) px (Pixels)

Fixed Width (px):

Gap Unit: px em rem % vw vh

Row Gap:

Column Gap:

Items:

Auto Rows Height:

Auto Rows Unit: px auto fr

Justify Content: stretch start end center space-between space-around space-evenly

Align Content: stretch start end center space-between space-around space-evenly

Justify Items: stretch start end center

Align Items: stretch start end center

First Item Span:

Item Color:

Text Color:

How to Use

• Set the number of Columns and choose their unit (fractional or pixels). If pixels, specify a Fixed Width.
• Define Row Gap and Column Gap values and select a Gap Unit (px, em, rem, %, vw, vh).
• Adjust the total number of Items to display in the grid.
• Configure default Auto Rows Height and its unit for implicitly created rows.
• Control the alignment of grid items and content within the grid using Justify Content, Align Content, Justify Items, and Align Items.
• Make the First Item Span multiple columns for custom layouts.
• Customize grid item Background Color and Text Color using the color pickers.
• Switch between CSS and HTML tabs to view the generated code.
• Click the "Copy Code" button to copy the currently displayed code snippet to your clipboard.

FAQs

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out content in rows and columns, making it much easier to design complex responsive web pages.

What are 'fr' units?

'fr' stands for 'fractional unit'. It's a flexible length unit that distributes available space in the grid container among the grid tracks. For example, '1fr 2fr' means the second track will take twice as much space as the first.

What is the difference between 'gap' and 'grid-gap'?

'gap' is a shorthand property that sets both 'row-gap' and 'column-gap'. 'grid-gap' is the older, deprecated equivalent. 'gap' is preferred for modern CSS Grid.

How do alignment properties work (justify-content, align-content, justify-items, align-items)?

• justify-content: Aligns the grid tracks within the grid container along the inline (row) axis.
• align-content: Aligns the grid tracks within the grid container along the block (column) axis.
• justify-items: Aligns grid items within their grid areas along the inline (row) axis.
• align-items: Aligns grid items within their grid areas along the block (column) axis.

What does 'First Item Span' do?

This property sets 'grid-column-end' for the first grid item, allowing it to span across multiple columns you specify. This is useful for creating featured sections or asymmetric layouts.