DEV Community

Cover image for Media Query with CSS Grid
Mysterio
Mysterio

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
  • 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);
        }
      }
Enter fullscreen mode Exit fullscreen mode
  • 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

Discussion (9)

Collapse
djibe profile image
djibe

Hi, why @media screen and (min-width:481px) and (max-width:768px) ?

Isn't cascading enough to mobile first then supercharge with
@media screen and (min-width:480px)
...
@media screen and (min-width:768px)
...
?
Thanks

Collapse
shubhamtiwari909 profile image
Mysterio Author

I didn't get your point
Can you please explain in detail

Collapse
djibe profile image
djibe

No need to set ranges of media queries as CSS will apply last rule.
So setting styles from lower to greater viewport width is enough.

Collapse
billraymond profile image
Bill Raymond

Could you add a codepen so we can see the code in action?

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure

Collapse
zubair314 profile image
Zubair314

Its great Please post example of media curey using flexbox

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure

Collapse
bluekodez profile image
Aniebiet Patrick

I really enjoyed your article Sir. More graceπŸ‘πŸ‘πŸ‘

Collapse
shubhamtiwari909 profile image
Mysterio Author

Thank you ❀️