Mastering CSS Grid: Tips and Tricks for Efficient Layouts

As a web developer, most of the beginners ignore the CSS grid method while developing a layout because its little complex then the css flex but its more powerful then the css grid. and make it more simple than the CSS Flex, i am going to provide you easy and simple tips and tricks by which you can master the CSS grid like a professional developer.

1. Understand the Basics

Before starting first clear all the basic concepts of CSS Grid such as grid-template-column, grid-template-row, grid-gap and grid-area. These form the foundation of any grid layout. Make sure your basic understanding is like a pro 😎 .

2. Use the fr Unit

fr unit(fraction of available space in the grid container) is used wheir we need create a flexible layouts. here is the code example:

HTML:

//............................html..................................
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item" style="background-color: aqua;">Item 2</div>
    </div>

CSS:

//.........................css.....................................
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .grid-item {
            background-color: #ccc;
            padding: 20px;
        }
    </style>

output:-

3. Take Advantage of repeat()

The repeat() function help your to simplify code by allowing you to repeat patterns. for example in below code we are repeating 1fr 4 times.:

HTML:

//............................html..................................
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item" style="background-color: aqua;">Item 2</div>
        <div class="grid-item" style="background-color: pink;">Item 3</div>
    </div>

CSS:

//.........................css.....................................
        <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .grid-item {
            background-color: #ccc;
            padding: 20px;
        }
    </style>

4. Use Named Grid Lines

Naming your grid lines makes your code more easier to read and more maintainable.

HTML:

//html
 <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
    </div>

CSS:

/css
<style>
        .grid-container {
            display: grid;
            grid-template-columns: [start] 1fr [middle] 1fr [end];
        }

        .grid-item {
            background-color: #ccc;
            padding: 20px;
        }

        .grid-item:first-child {
            grid-column: start / middle;
        }

        .grid-item:last-child {
            grid-column: middle / end;
        }
    </style>

5. Create Responsive Layouts with Media Queries

make your code easily responsive by combing the media queries with your code:

HTML:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}
.grid-item {
  background-color: #ccc;
  padding: 20px;
}

6. Use minmax() for Flexible Sizing

make you layout more flexible according to the size of you layout you can use minmax function by which you can pass minimum and maximum value to the function. here is the code example:

HTML:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}
.grid-item {
  background-color: #ccc;
  padding: 20px;
}

7. Use Grid Areas for Complex Layouts

by this method you can create layout using the name of the tags and by that you can easily mange complex layout without confusion.

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 10px;
}
.header { grid-area: header; background-color: #ccc; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #aaa; padding: 20px; }
.main { grid-area: main; background-color: #ccc; padding: 20px; }
.footer { grid-area: footer; background-color: #aaa; padding: 20px; }

10. Debug with Browser DevTools

by this devtools you can easily debug error in you code. and you can enable grid option to show grid side to make your coding experience better.

conclusion

by this tip and trick you can easily master the css grid. and make you coding experience like a pro. all the 8 method while gradually increate the knowlege of css grid. as a web developer css grid very helpful while developing a complex layout with very easy manner. most of professional developers use css grid while developing a layout.