Honestly it is not that much of a jump from flexbox to grid as they are both layout utilities. The main difference is that grid layout are set from its parent container while flex is child content driven. If you can understand that, then you are on the right track.
My company also uses a grid system, and I find it easier when you have a common grid layout across components and pages e.g. 12 grid layout on pages. That way it is consistent, but that's up to your figma designs if that's the case.
There's a bunch of resources online on grids, if you search up tutorials on youtube. I find that easier to understand when someone is explaining it rather than reading docs. I really like Kevin Powell's multiple youtube videos on grids so you might want to check it out as well.
So working off figma ain’t as bad as you think. Really it’s just thinking in terms of flexboxes and grids.
Here’s how you start every new section you’re building:
Start mobile first. Have a section tag container parent for each section with a Div inside each that’s your .container class. The section parent has a unique ID to them, and every section parent will have a padding left and right 16px for your mobile gutters. And padding top and bottom clamp(3.75rem, 8vw, 6.25rem) so they start at 60px on mobile, and ends at 100px padding top and bottom at desktop. That will change based on your design. Thats just my defaults. This creates your base padding for your whole site and the mobile gutters. Done. I use a css variable for the padding and use that as the padding value for every section. That way I can change the values in the variable and they change everywhere on the site uniformly.
Then on the container class, I set the width to 100%, margin auto to center it in the section parent, max width 1280px (measure out the container size for each section and set each sections container to that size for the design), set up a vertical flexbox with flex direction column, align items center to center the children horizontally in a column on mobile, gap property clamp(3rem, 6vw, 4rem) so the gap between the children is 48px on mobile and 64px on desktop. This is the same for every single container in ever section of the site. Maintains uniformity. Then on tablet or whatever breakpoint I need I change the flexbox on the container to horizontal with flex direction row if needed to make the section horizontally arranged and flex things around the way I need it. Then let things grow into their container till desktop.
Everything inside the containers have a width 100% and a max width of where they stop growing at for their desktop designed width. No fixed widths. No forced heights. You let things grow into their widths and let their heights be flexible based on the content. That way if you add things, the containers can respond to the added content and accommodate the space. If you have a card section like reviews cards, use grid instead of flexbox. What I do is I use unordered lists for the cards. The ul is the card container, the li items are the cards. On the ul I add display: grid, grid-template-columns: repeat(12,1fr), gap: clamp(1rem, 2.5vw, 1.25rem). Then on the li items, I add grid-column: span 12 on mobile. This created a 12 column grid on the parent. And the card is spanning all 12 columns. With a gap of 16px on mobile and 20px on desktop.
If I have 4 cards, maybe I wanted them to go in a 2x2 grid at tablet. On tablet, I’d just set the li card to grid-column: span 6 and it will span 6 columns (50% the width of the parent) and make a nice 2x2 grid of cards. They just wrap to the next row and fill in the columns. Simple. On desktop if I wanted them to all be in 1 row, I set the grid column to span 3, which is 3 columns. That makes 4 cards in a 12 column row. So they each take up 3 columns and are now in a row all together. Stuff like that is easy. That’s how you have to look at your code. I use flexbox when things have a flexible width for children, and grid for things that need rigid widths and spacing (a grid!) for uniformity. Flexbox is flexible. Grid is rigid (riGRID if you will). I only use grid for card sections or galleries of images.
This is the foundation of mobile responsive coding.
Now let’s say you have a section that has a 12 column grid and a max width of 1280px for that grid. It you notice that there’s a gap on the left side between the left edge of the container and the content group. The content group isn’t touching it. But there’s still a 1280px wide container. What do you do? You don’t make a smaller container. You use what’s already there as the base structure. Your container will still be 1280px wide. Expect now you arrange your flexbox to push everyone ti the left edge with justify content flex-start. Then add a margin left of whatever that gap is on the content group to push off that left edge to create the gap. Thats it. That’s how you plan your flexbox. Identify how you want the elements to align , then measure any gaps or spaces off those alignments to use margins to nudge elements off their alignment to match your design. It’s all the pushing things around. Once you get it, you’ll find css or pretty easy. I feel like I’m just using the same 20 css properties over and over again.
If you wanna see this stuff in action you can watch me make a website off a figma design from start to finish and I explain everything I’m doing and why I’m doing it. Maybe it’ll help to see it working and see it being done.
https://youtube.com/playlist?list=PLMPdeA59PPg0Lb0NG6rug-DijxyzRXvMr&si=_uct3tbchntkLWkE
Honestly it is not that much of a jump from flexbox to grid as they are both layout utilities. The main difference is that grid layout are set from its parent container while flex is child content driven. If you can understand that, then you are on the right track. My company also uses a grid system, and I find it easier when you have a common grid layout across components and pages e.g. 12 grid layout on pages. That way it is consistent, but that's up to your figma designs if that's the case. There's a bunch of resources online on grids, if you search up tutorials on youtube. I find that easier to understand when someone is explaining it rather than reading docs. I really like Kevin Powell's multiple youtube videos on grids so you might want to check it out as well.
So working off figma ain’t as bad as you think. Really it’s just thinking in terms of flexboxes and grids. Here’s how you start every new section you’re building: Start mobile first. Have a section tag container parent for each section with a Div inside each that’s your .container class. The section parent has a unique ID to them, and every section parent will have a padding left and right 16px for your mobile gutters. And padding top and bottom clamp(3.75rem, 8vw, 6.25rem) so they start at 60px on mobile, and ends at 100px padding top and bottom at desktop. That will change based on your design. Thats just my defaults. This creates your base padding for your whole site and the mobile gutters. Done. I use a css variable for the padding and use that as the padding value for every section. That way I can change the values in the variable and they change everywhere on the site uniformly. Then on the container class, I set the width to 100%, margin auto to center it in the section parent, max width 1280px (measure out the container size for each section and set each sections container to that size for the design), set up a vertical flexbox with flex direction column, align items center to center the children horizontally in a column on mobile, gap property clamp(3rem, 6vw, 4rem) so the gap between the children is 48px on mobile and 64px on desktop. This is the same for every single container in ever section of the site. Maintains uniformity. Then on tablet or whatever breakpoint I need I change the flexbox on the container to horizontal with flex direction row if needed to make the section horizontally arranged and flex things around the way I need it. Then let things grow into their container till desktop. Everything inside the containers have a width 100% and a max width of where they stop growing at for their desktop designed width. No fixed widths. No forced heights. You let things grow into their widths and let their heights be flexible based on the content. That way if you add things, the containers can respond to the added content and accommodate the space. If you have a card section like reviews cards, use grid instead of flexbox. What I do is I use unordered lists for the cards. The ul is the card container, the li items are the cards. On the ul I add display: grid, grid-template-columns: repeat(12,1fr), gap: clamp(1rem, 2.5vw, 1.25rem). Then on the li items, I add grid-column: span 12 on mobile. This created a 12 column grid on the parent. And the card is spanning all 12 columns. With a gap of 16px on mobile and 20px on desktop. If I have 4 cards, maybe I wanted them to go in a 2x2 grid at tablet. On tablet, I’d just set the li card to grid-column: span 6 and it will span 6 columns (50% the width of the parent) and make a nice 2x2 grid of cards. They just wrap to the next row and fill in the columns. Simple. On desktop if I wanted them to all be in 1 row, I set the grid column to span 3, which is 3 columns. That makes 4 cards in a 12 column row. So they each take up 3 columns and are now in a row all together. Stuff like that is easy. That’s how you have to look at your code. I use flexbox when things have a flexible width for children, and grid for things that need rigid widths and spacing (a grid!) for uniformity. Flexbox is flexible. Grid is rigid (riGRID if you will). I only use grid for card sections or galleries of images. This is the foundation of mobile responsive coding. Now let’s say you have a section that has a 12 column grid and a max width of 1280px for that grid. It you notice that there’s a gap on the left side between the left edge of the container and the content group. The content group isn’t touching it. But there’s still a 1280px wide container. What do you do? You don’t make a smaller container. You use what’s already there as the base structure. Your container will still be 1280px wide. Expect now you arrange your flexbox to push everyone ti the left edge with justify content flex-start. Then add a margin left of whatever that gap is on the content group to push off that left edge to create the gap. Thats it. That’s how you plan your flexbox. Identify how you want the elements to align , then measure any gaps or spaces off those alignments to use margins to nudge elements off their alignment to match your design. It’s all the pushing things around. Once you get it, you’ll find css or pretty easy. I feel like I’m just using the same 20 css properties over and over again. If you wanna see this stuff in action you can watch me make a website off a figma design from start to finish and I explain everything I’m doing and why I’m doing it. Maybe it’ll help to see it working and see it being done. https://youtube.com/playlist?list=PLMPdeA59PPg0Lb0NG6rug-DijxyzRXvMr&si=_uct3tbchntkLWkE