Design comparison
Solution retrospective
how do you know when it's better to use flex or grid?
Community feedback
- @elaineleungPosted about 2 years ago
Hi Kevin, great job completing your second challenge, and very good question here as well. I think it depends on what you want to do with either flexbox or grid. I almost always use flexbox for everything; the only times when I use grid are when I need to make a grid-like layout and also when I need quick centering and I'm not concerned with collapsing margins. I encourage you to just experiment with both and see how they work; then you would know which tool you want to use for which job.
Speaking of centering, I see that you got some flexbox properties already on
body
, but you also have amargin-top
, which I'm guessing is for helping with pushing the component towards the center. Try removing that margin, and then inbody
, addmin-height: 100vh
. That should help you with centering! Centering a components requires some height and space, so themin-height
is what gives the browser space to center the content. Keep going!Marked as helpful3 - @denieldenPosted about 2 years ago
Hi Kevin, congratulations on completing the challenge, great job! 😁
Some little tips for optimizing your code:
- remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - remove all
margin-top
from.contenedor
class because with flex they are superfluous - after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - use relative units of measurement like
rem
also for the text size
Hope this help! Happy coding 😉
Marked as helpful1 - remove all unnecessary code, the less you write the better as well as being clearer: for example the
- @correlucasPosted about 2 years ago
👾Hello Kevin Garcia, congratulations for your new solution!
Answering your question about GRID and FLEX:
I'll give you my opinion about both properties, when I do complex grids or have to create layout (like component with 2 or 3 column) I go with
GRID
and I useflex
to manage the content inside these column. To create simple component like thisQR CODE
that has a single column and its simple you can use the good and oldflex
that has a quick setup and its much more simple thangrid
.Here's a good article explaining when its better flex/grid:
https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184
👋 I hope this helps you and happy coding!
Marked as helpful1 - @vanzasetiaPosted about 2 years ago
Hi, Kevin Garcia! 👋
Regarding the use case of grid and flexbox, in general, you want to use flexbox if the layout is a one-dimensional layout (either row or column). For the grid, it is a better choice to create a two-dimensional layout (row and column).
One suggestion I have is to improve the alternative text of the QR code. I would recommend telling the users about the QR code. In this case, the QR code will navigate the users to https://www.frontendmentor.io/. So, the better alternative text would be "QR code to frontendmentor.io".
That's it! I hope you find this useful! 🙂
Marked as helpful1 - @DavidMorgadePosted about 2 years ago
Buenas Kevin, primero que todo enorabuena por finalizar el challenge!
Me gustaría darte mi opinión personal acerca de cuando usar flex-box o CSS grid
Intenta utilizar siempre que puedas flex cuando te encuentres con 1 columna sola o una fila sola, el ejemplo más claro y sencillo suele ser una barra de navegación, o incluso algunas partes del layout como por ejemplo el propio contenido de este componente.
CSS grid en cambio utilizalo siempre que tengas más de una columna / fila, o varios elementos que vayan en distintas columnas y filas, recuerda que debes ir adaptando siempre tu grid al tamaño de la pantalla, y que puedes cambiar los elementos de row y columna a la que tu quieras, independientemente de donde los tengas en tu HTML, esto te va a dar más flexibilidad que con flexbox, pero también es un poco más complicado conseguir el resultado deseado.
Te recomiendo si quieres practicar que pruebes estos simples juegos de navegador FlexboxFroggy y Grid-garden
Espero que mi respuesta te haya sido de ayuda, buen trabajo!
Marked as helpful1 - @JetyunPosted about 2 years ago
hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other.
for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.
You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord