CSS Grid Examples

Example - Simple Fluid, Boxes Layout

2 boxes across for desktop, and 1 across for mobile.

It's a fluid and simple css grid layout.


Example Shown Here:

Box 1
Box 2
Box 3
Box 4
Box 5

    Here is another CSS Grid example, with boxes that flow neatly 2 up for desktop, and 1 across for mobile.

Code Box:

HTML:

<div class="grid-container-10">
    <div class="grid-item-10">Box 1</div>
    <div class="grid-item-10">Box 2</div>
    <div class="grid-item-10">Box 3</div>
    <div class="grid-item-10">Box 4</div>
    <div class="grid-item-10">Box 5</div>
</div>



CSS:

<style>
.grid-container-10 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns, each taking 50% */
    gap: 1rem; /* Adjusts the space between boxes */
}

.grid-item-10 {
    background-color: #f0f0f0; /* Optional styling for each item */
    padding: 1rem; /* Optional padding */
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .grid-container-10 {
        grid-template-columns: 1fr; /* Stacks items vertically on smaller screens */
    }
}
</style>



Example - Simple Grid Layout

2-column grid layout, where the first column is 20% width and the second column is 80%.

It's a fluid and simple layout.


Example Shown Here:

Column 1 (20%)
Column 2 (80%)

    This simple example is a testament to the usefulness of CSS Grid, and the simplicity of using it in css.

Code Box:

HTML:

<div class="grid_container1">
    <div class="grid_column1">Column 1 (20%)</div>
    <div class="grid_column2">Column 2 (80%)</div>
</div>



CSS:

<style>
.grid_container1 {
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 0rem;
    width: 100%;
    height:50vh;
}

.grid_column1 {
    background-color: #f0f0f0;
}

.grid_column2 {
    background-color: #e0e0e0;
}
</style>



CSS Grid Discussion

Example - Grid Layout

How is Grid helpful in css responsive layouts?

  1. Two-Dimensional Layout: CSS Grid is designed for both rows and columns, making it suitable for creating complex layouts that require alignment along both axes. It's great for grid-like structures and entire page layouts.

  2. Grid Control: Grid provides more control over row and column sizing, enabling you to define explicit sizes, fixed and flexible tracks, and content alignment. This is especially useful for layouts that demand precise control.

  3. Responsive by Default: Grid has built-in support for creating responsive designs with media queries. You can easily change the layout of items based on different screen sizes without altering the HTML structure.

  4. Grid Template Areas: Grid allows you to define layout areas with grid-template-areas, which can be helpful for creating visually complex layouts with different content sections.

  5. Implicit Grids: CSS Grid can automatically create rows and columns based on the content you have, allowing you to build layouts without explicitly defining the number of rows or columns.

In summary, CSS Grid is powerful for creating complex two-dimensional layouts, especially for entire page structures.


Example Shown Here:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

    In this CSS Grid example, we leverage the power of grid-based layout to create a dynamic and versatile structure. By establishing a grid container with the class .grid-container, we create a two-dimensional grid that accommodates both rows and columns. Grid cells are defined with the class .grid-cell, allowing content to be seamlessly arranged in a way that maximizes both alignment and responsiveness.

    The ability to specify explicit column and row sizes using the grid-template-columns and grid-template-rows properties offers precise control over the layout's appearance. Furthermore, utilizing the grid-gap property for spacing enhances the readability and aesthetics of the design.

    This approach empowers designers to create complex layouts with ease, such as magazine-style layouts, image galleries, and intricate dashboard designs. With CSS Grid, designers have the flexibility to achieve a structured, yet adaptable, layout that optimizes content presentation across various screen sizes and devices.

Code Box:

HTML:

<div class="grid-container">
    <div class="grid-cell">Cell 1</div>
    <div class="grid-cell">Cell 2</div>
    <div class="grid-cell">Cell 3</div>
    <div class="grid-cell">Cell 4</div>
    <div class="grid-cell">Cell 5</div>
    <div class="grid-cell">Cell 6</div>
</div><br>



CSS:

<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: auto; /* Automatic row sizing */
    grid-gap: 20px; /* Gap between cells */
    padding: 20px;
    background-color: #f1f1f1;
}

.grid-cell {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
</style>