Testimonials section using Grid, and Sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Great job and your first grid challenge here is awesome. Those layouts are good as I resize the browser.

  Regarding your concern. Yes it is possible, but to use here is the grid-template-columns and not the grid-template-rows. To achieve this you have to declare you grid-template-columns to something like this grid-template-columns: repeat(auto-fit, minmax(min, max)). Okay here's what will happen.

  1. The grid container of yours will insert an element in a row if it satisfies the min argument of the gtc(grid-template-columns). For example, the declaration is this grid-template-columns: repeat(auto-fit, minmax(2rem, 4rem)). If the container have an extra space for another element, this case, if the container have an extra 2rem space, then it will add another element on it.

  2. Now if you resizes it down, the container's size resizes right, then, if it does not have the extra space, then the element in the row will be placed in another row, because the container now cannot handle them. Thus, making the grid fluid. Like flexbox with flex-wrap.

  This is kinda new for you since you said it is your first grid, but a couple of search for that and you are ready to go^^

  1

  ---

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  Thankss @pikamart! You're right lol this did go over my head, but I promise to myself I'm gonna learn it and master Grid one day 💪😤

  Really appreciate the help :)

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @alimansoor-create Your welcome on that, and if you need help, just drop it here okay. Quick suggestion, freecodecamp.org have a good free cource about responsive web design and also for grids and flexbox^

  0

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @pikamart So I got what you were saying and it's pretty cool, but actually not what I wanted to achieve. Rather something like this: https://imgur.com/a/GE2e6ZW

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @alimansoor-create Oh yes you can definitely do that. But manipulating many grid-template-rows for that one. Like initializing grid-template-rows: repeat(10, 10rem) that is example. Then, the child of such grid will take different grid-rows. It is hard to visualize it but i'll do it later in my jsfiddle and send you the link for it then you can take that as a reference, sounds good?

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @pikamart After I finish my current challenge i'll do that

  0

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @pikamart Thank you so much, man.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @alimansoor-create Hey, so here is my work regarding on that. You have to manipulate many grid-rows [link of my sample] (https://codepen.io/pikapikamart/pen/NWdaebL)

  1

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @pikamart Nice, that's a great approach, but could there be a way for the child divs to resize based on their content, while keeping the gap between each other.

  Something like perhaps Trello boards, but there can be multiple boards in a column.

  I think this could be possible if we use flex containers in each grid column, but that kinda defeats the purpose of using Grid alone.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @alimansoor-create Hmm I can't of other way for that hahaha since grid places another row inline with other items on it. So it is the fixed alignment for rows. I only thought about the grid items to be somewhat decorative and not with content.

  But if I will have an idea about it, i'll let you know ^

  1

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @pikamart Yo I did some research and found out that what I wanted is called a masonry layout. In Firefox, this can be achieved by enabling an experimental flag and then setting grid-template-rows: masonry

  This method is currently only supported in Firefox and that too through a flag, but there are some workarounds for other devices using JavaScript.

  Happy coding!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @alimansoor-create Hey, good work on that research. I just searched it right now when I saw your reply and it is really awesome but a bummer since it is for firefox right now.

  But still achievable by js right, but haven't really checked their implementation using js. But let just hope they update it to other browser as well hahahah, they also call it the pinterest layout

  2