Responsive grid section

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good job on your work. Regarding your queries.

  1. in using media queries, well it is pretty simple, you just define something like this @media (max-width: 1000px) what it does, when your browser resizes and scales down, once it reached the 1000px mark, then the code inside of that media will run.

  @media (max-width: 1000px) {
    body {min-width: 50%};
  }
  

  Above, when it reaches 1000px, it will make the body tag's min-width to be 50%. That is the idea of media queries. You can also define multiple @media queries in your stylings

  2. To make your grid responsive, well what you can do is that, inside of your desired media query, just adjust your grid-template-columns or grid-template-areas but before that, I see that you declared your grid-template-columns like this grid-template-columns: 1fr 1fr 1fr 1fr; it works but it's long, this is what you should do and a good practice. grid-template-columns: repeat(4, 1fr);. rrepeat() functions uses two arguments, the first one is the quantity or how many that you want to repeat, in our case, there are 4. The second argument, is the size of each repetition, in our case again, it is 1fr. Using that will help you. But let's say you have a design that requires this grid grid-template-columns: 500px 1fr 1fr 1ft 3fr, it can be translated to this grid-template-columns: 500px repeat(3, 1fr) 3fr. The same goes for grid-template-rows

  3. Well like what I said, you can declare, or reshape your grid when you reached your design media breakpoint. But if you want to make your grid fluid, well you can use this and I will explain it. Let's us say, you have a grid container that takes 100% of the width of the viewport, with stylings like this, grid-template-columns: repeat(auto-fill, minmax(60px, 200px)) now it looks like a bunch of stuffs, but okay, what this does is, your grid container will fill it's area according to the sizes of the grid items. In our case, it will auto-fill itself. When the grid-container have still a space, it will fill another grid-items, whose width must be a minimum of 60px and maximum of 200px. So it will fill as much as it can, and if your container resizes its width, then the excess grid-items, will be placed in another row because the parent container now can't hold any more items.

  If you need more help of question feel free to drop it here. But while you are learning grid, check this grid section of freecodecamp grid this will really help you understanding display grid^^

  1

  ---

  

  Maksim Deviatilov•185

  @maksimcoderPosted over 3 years ago

  Hello, Pikamart, thank you a lot for your recommendations I'll follow these tips and improve my project soon. I'm currently diving in responsive web design and trying to do my best in this sphere. Thanks a lot!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @maksimcoder Your welcome on that and just ask here in you need more help ^^

  0