@shivjoshi1996
Posted
Hey there,
Grid and Flexbox can sometime be used for the same thing, so it can be a little confusing.
Flexbox is typically used for layout out items in a single dimension (e.g. flex-direction: columns, OR row).
Grid can help us do these things in two dimensions (columns AND rows), and has built-in features that can better help control the structure of two dimensional layouts.
Here is an article explaining some of the differences further: https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/
@vickymarz
Posted
@shivjoshi1996 thank you! So instead of having two separate flexbox in a single page as I used in this project, I should just use a single grid right?
@shivjoshi1996
Posted
@vickymarz I think the way you've used Flex here is fine.
You could technically use Grid to achieve the overall layout of the page (i.e. two columns in the top row for the text area and the ratings area, and one column in the bottom row for the testimonial area), and then use flexbox to space out the different elements in each grid area.
But I think for this particular challenge, both Flexbox or Grid can be used to a good effect. I think it comes down to which you are more comfortable in.
I would encourage you to try this challenge using Grid for the layout, I think it may help explain some of the pros / cons frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7
As you can see, this challenge features a tricky layout, which may be difficult to produce in Flex due to the way the boxes are ordered. Grid will help in cases like this, and once you get familiar with using Grid, you'll know when to use it vs Flexbox.
Cheers!
@vickymarz
Posted
@shivjoshi1996 I have already completed the challenge you recommended. It was actually impossible for me to use flexbox in that project. The project made me to want to stop using flexbox totally and focus only on grid. But When I used grid in another project, I noticed that when I try to resize the browser, the items didn't adjust itself properly as it would using flexbox. Hence my dissatisfaction.
@vickymarz
Posted
@shivjoshi1996 concerning this project. My thought on using grid was that I will have three columns and two rows.
In the first column, the first row will contain the top article while the second row will contain the left testimonial.
In the second column, the first row will be empty while the second row will contain the middle testimonial
In the third column, the first row will contain the rating section while the second row will contain the right testimonial.
But I just figured I might encounter small challenges if I go by this method, thus I want for flexbox
