Responsive CSS and the use of CSS Grid

I have always struggled with the media queries semantics. For example @media (min-width: 450px) {..... books and tutorials explain this using the word max : like :"Apply the following CSS rules to screens that are at max 450 pixels ." and my little artist neurons go nuts min, max 🤪. So here is simpler way to put it the comments: /*Apply these rules to screens that are at least 450 pixels wide or larger. */ and I always add it that to straight my cell back again. So dont mix min with max , max leave to use @media (max-width: 1080px) : /Apply these rules to screens that are 1080 pixels wide or smaller."/ Grid land Flexbox are a tough nut craker it seems daunting at first, but once you've got it, it's a game-changer for layout design. But familiarize with them a lot before use a framework like Tailwind (forget about Bootstrap and Foundation) or ChackaUI(React) so you can fly with them 🚀 For Flexbox declare you classes with display: flex to be able to enter your magic code and don't forget about playing around with Froggy and Zombies. Forget about all that nonsense with Grid just use fractions with display:grid and grid-template-columns: 250px repeat(1, 1fr); (for simple grids) and template grid-area combine with grid-template-area (for complex ones)

Grid. grid always grid check my code

I really admire your ability to add comments to your code, they really helped me a lot to figure out how to do the nutrition table. Thanks a lot.

Thanks Shivanshvohra,

.grid-container { display: grid; grid-template-columns: 250px repeat(1, 1fr); /* with fr you have more flexibility than just using auto Creates two columns / grid-gap: 0; / Remove gap to allow borders to connect */ padding: 10px; font-family: 'Outfit', sans-serif; }

way better than mine wouold love to know how you created that nutrition table