CSS Grid Library Documentation

Overview

This CSS Grid library provides a powerful, class-based grid system that allows for flexible layouts. The library uses CSS Grid properties to control the placement and sizing of grid items via predefined classes. It supports column and row spans, start and end positioning, alignment utilities, gap control, and responsive design.

Quick Start

Grid Container

To create a grid, add the .grid-container class to a container element. This establishes a grid with 12 columns by default, and it automatically adjusts the rows based on content.

<div class="grid-container">
  <!-- Grid Items go here -->
</div>

Grid Item Placement

You can control the placement of grid items using the following classes:

• Column Spans: Control how many columns an item should span.
• Row Spans: Control how many rows an item should span.
• Column and Row Starts: Control the exact starting position of a grid item.
• Column and Row Ends: Control the exact ending position of a grid item.

Classes Reference

1. Column Spans

Use the following classes to specify how many columns an item should span across. The system is based on a 12-column grid.

.col-span-1: Spans 1 column
.col-span-2: Spans 2 columns
.col-span-3: Spans 3 columns
.col-span-4: Spans 4 columns
.col-span-5: Spans 5 columns
.col-span-6: Spans 6 columns
.col-span-7: Spans 7 columns
.col-span-8: Spans 8 columns
.col-span-9: Spans 9 columns
.col-span-10: Spans 10 columns
.col-span-11: Spans 11 columns
.col-span-12: Spans 12 columns (the entire width)

2. Row Spans

Similarly, use row spans to control how many rows an item should occupy. The system supports up to 12 rows.

.row-span-1: Spans 1 row
.row-span-2: Spans 2 rows
.row-span-3: Spans 3 rows
.row-span-4: Spans 4 rows
.row-span-5: Spans 5 rows
.row-span-6: Spans 6 rows
.row-span-7: Spans 7 rows
.row-span-8: Spans 8 rows
.row-span-9: Spans 9 rows
.row-span-10: Spans 10 rows
.row-span-11: Spans 11 rows
.row-span-12: Spans 12 rows

3. Start and End Positions (Columns)

Control the precise start and end position of a grid item across columns using col-start-x and col-end-x classes.

.col-start-1: Starts at column 1
.col-start-2: Starts at column 2
.col-start-3: Starts at column 3
.col-start-4: Starts at column 4
.col-start-5: Starts at column 5
.col-start-6: Starts at column 6
.col-start-7: Starts at column 7
.col-start-8: Starts at column 8
.col-start-9: Starts at column 9
.col-start-10: Starts at column 10
.col-start-11: Starts at column 11
.col-start-12: Starts at column 12

.col-end-2: Ends at column 2
.col-end-3: Ends at column 3
.col-end-4: Ends at column 4
.col-end-5: Ends at column 5
.col-end-6: Ends at column 6
.col-end-7: Ends at column 7
.col-end-8: Ends at column 8
.col-end-9: Ends at column 9
.col-end-10: Ends at column 10
.col-end-11: Ends at column 11
.col-end-12: Ends at column 12

4. Start and End Positions (Rows)

Similarly, control the exact row placement of grid items using row-start-x and row-end-x classes.

.row-start-1: Starts at row 1
.row-start-2: Starts at row 2
.row-start-3: Starts at row 3
.row-start-4: Starts at row 4
.row-start-5: Starts at row 5
.row-start-6: Starts at row 6
.row-start-7: Starts at row 7
.row-start-8: Starts at row 8
.row-start-9: Starts at row 9
.row-start-10: Starts at row 10
.row-start-11: Starts at row 11
.row-start-12: Starts at row 12

.row-end-2: Ends at row 2
.row-end-3: Ends at row 3
.row-end-4: Ends at row 4
.row-end-5: Ends at row 5
.row-end-6: Ends at row 6
.row-end-7: Ends at row 7
.row-end-8: Ends at row 8
.row-end-9: Ends at row 9
.row-end-10: Ends at row 10
.row-end-11: Ends at row 11
.row-end-12: Ends at row 12

5. Full Width and Full Height

For elements that should span the entire width or height of the grid, use the following classes:

.full-width: Spans across all columns
.full-height: Spans across all rows

6. Gap Control

Control the spacing between grid items using predefined gap sizes.

.gap-xsmall: Extra small gap (2px)
.gap-small: Small gap (5px)
.gap-large: Large gap (20px)
.gap-xlarge: Extra large gap (40px)

7. Alignment

Use alignment utilities to control how items are aligned within their grid cells, both horizontally (justify-items) and vertically (align-items).

.align-start: Aligns items to the top left
.align-center: Centers items both vertically and horizontally
.align-end: Aligns items to the bottom right

Responsive Design

The grid system is responsive by default. The number of columns changes based on screen width. You can modify the grid layout using media queries.

Breakpoints:

• Above 1200px: 12 columns (default)
• Between 1200px and 768px: 8 columns
• Between 768px and 480px: 4 columns
• Below 480px: 2 columns

Usage Examples

Basic Grid Example:

<div class="grid-container">
  <div class="col-span-6 row-span-2">Item 1 (6 columns, 2 rows)</div>
  <div class="col-span-3 col-start-7 row-span-1">Item 2 (3 columns, starts at column 7)</div>
  <div class="col-start-1 col-end-4 row-start-3 row-end-5">Item 3 (Precise start/end)</div>
  <div class="full-width">Item 4 (Full-width)</div>
</div>

Responsive Grid Example:

<div class="grid-container">
  <div class="col-span-4 row-span-1 gap-large">Responsive Item 1 (Adjusts based on screen size)</div>
  <div class="col-span-6 row-span-2">Responsive Item 2 (6 columns, 2 rows)</div>
</div>

Full-Width Example:

<div class="grid-container">
  <div class="full-width gap-small">Full-width Item</div>
</div>

Alignment Example:

<div class="grid-container">
  <div class="col-span-4 row-span-1 align-center">Centered Item</div>
  <div class="col-span-4 row-span-2 align-end">Item Aligned to Bottom Right</div>
</div>

Customization

Feel free to modify or extend the library based on your project's specific needs:

• Additional column/row spans: You can extend the grid by adding more column/row spans if your project requires more than 12 columns or rows.
• New breakpoints: Adjust the existing breakpoints or add new ones based on your design requirements.

Conclusion

This CSS Grid library provides a highly customizable and flexible solution for building responsive layouts. With column and row spans, start and end positioning, alignment controls, and responsive behavior, it is designed to adapt to a wide variety of layout needs.

Feel free to use the provided examples as a reference and adjust the classes to fit your project!