Media Query with CSS Grid

Hello Guys today i am going to show you How to use media query with CSS grid to create a responsive grid system in your web page.

Lets get started...

HTML -

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="container">
      <div class="elements">1</div>
      <div class="elements">2</div>
      <div class="elements">3</div>
      <div class="elements">4</div>
      <div class="elements">5</div>
      <div class="elements">6</div>
      <div class="elements">7</div>
      <div class="elements">8</div>
      <div class="elements">9</div>
      <div class="elements">10</div>
      <div class="elements">11</div>
      <div class="elements">12</div>
      <div class="elements">13</div>
      <div class="elements">14</div>
      <div class="elements">15</div>
      <div class="elements">16</div>
      <div class="elements">17</div>
      <div class="elements">18</div>
      <div class="elements">19</div>
      <div class="elements">20</div>
      <div class="elements">21</div>
      <div class="elements">22</div>
      <div class="elements">23</div>
      <div class="elements">24</div>
      <div class="elements">25</div>
      <div class="elements">26</div>
      <div class="elements">27</div>
      <div class="elements">28</div>
      <div class="elements">29</div>
      <div class="elements">30</div>
      <div class="elements">31</div>
      <div class="elements">32</div>
      <div class="elements">33</div>
      <div class="elements">34</div>
      <div class="elements">35</div>
      <div class="elements">36</div>
      <div class="elements">37</div>
      <div class="elements">38</div>
      <div class="elements">39</div>
      <div class="elements">40</div>
      <div class="elements">41</div>
      <div class="elements">42</div>
      <div class="elements">43</div>
      <div class="elements">44</div>
      <div class="elements">45</div>
      <div class="elements">46</div>
      <div class="elements">47</div>
      <div class="elements">48</div>
      <div class="elements">49</div>
      <div class="elements">50</div>
    </div>
  </body>
</html>

Here we have created a div with class name "container" and inside it we have created 40 div with class name "elements"

CSS -

     .container{
        /* box model properties */
        margin: 3rem auto;
        padding: 2rem;

        /* display properties */
        display: grid;
        grid-template-columns: repeat(5,1fr);
        place-items: center;
        gap: 20px 30px;

        /* UI properties */
        background-color: darkslateblue;
        border-radius: 10px;
      }
      .elements{
        /* box model properties */
        padding: 1rem 2rem;

        /* Display Properties */
        text-align: center;
        /* UI Properties */
        background-color: rgb(169, 158, 238);
        border-radius: 6px;
        color: rgb(41, 42, 43);
      }

      /* Mobile View */
      @media screen and (min-width:250px) and (max-width:480px) {
        .container{
          grid-template-columns: repeat(1,1fr);
        }
      }

       /* Tablet View */
       @media screen and (min-width:481px) and (max-width:768px) {
        .container{
          grid-template-columns: repeat(3,1fr);
        }
      }
       /* Laptop View */
       @media screen and (min-width:769px) and (max-width:1024px) {
        .container{
          grid-template-columns: repeat(4,1fr);
        }
      }

Here we made the div a grid using display:grid property and using grid-template-columns:repeat(5,1fr) , we have created grid with 5 columnsd and 8 rows (8 x 5 = 40 elements), gap:20px 30px means 20px gap between rows and 30px gap between columns and place-items:center means the items will be centered in both horizontally and vertically.
Then we did the normal styling to the container class
Then we styled the all the div having class name "elements".
Then we created a media query for Mobile view with (min-width:250px) and (max-width:480px) and inside it we have set the grid-template-columns:repeat(1,1fr) , it means between 250px and 480px the container will have only one column and 40rows , it is for the mobile users.
Then we created a media query for Tablet view with (min-width:481px) and (max-width:768px) and inside it we have set the grid-template-columns:repeat(3,1fr) , it means between 481px and 768px the container will have 3 columns column and 17 rows , it is for the tablet users.
Then we created a media query for Tablet view with (min-width:769px) and (max-width:1024px) and inside it we have set the grid-template-columns:repeat(3,1fr) , it means between 769px and 1024px the container will have 4 columns column and 13 rows , it is for the small screen or Laptop users.
Above 1024px, The grid will have default 5 columns and 10 rows

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Blog

Media Query with CSS Grid

Shubham Tiwari

HTML -

CSS -

Join Our Newsletter. No Spam, Only the good stuff.

Related