What role does a container play in the two layouts?

Flexbox Container: The contrainer is the box that is holding the content within and the flexbox inside it is a one-dimensional layout system that we can use to create a row or a column axis layout. Every element that you have inside that flex container turns into a flex item.

CSS Grid: CSS grid is a two-dimensional layout system, we can work withs rows and columns together. With a grid container, you need to add the display: grid property, so you should now be able to define how many rows and columns do you want.

CSS Flexbox

What is Flexbox best used for?

You have a small design to implement
You need to align elements
You need a content-first design

Flexbox is ideal when you have a small layout design to implement. Using display: flex, and then define the flex-direction that we want. And finally Flexbox is the ideal layout system to create web pages if you don’t know exactly how your content is going to look, so if you want everything just to fit in.

CSS Grid is Better When:

You have a complex design to implement - if you are making something complex than something simple, then using CSS Grid is the better way to go and is better mantained for your webpage,
You need to have a gap between block elements - If you are needing a gap between rows or columns without having the margin proptery then using CSS Grid would be your go to.
You need to overlap elements - Unlike Flexbox you dont need to use hacks such as margins, transofmrs, or absoulte positioning to overlap elements. And its easy all you just need to use is the grid-column and grid-row properties!
You need a layout-first design - It makes it easier to build with CSS Grid i fyou have already have your layout design structure done and with a two-dimensional layout, itll help you be able to use rows and columns together with positioning.

Write code to make a flex box horizontal row containing 4 boxes evenly spaced. The boxes should contain the induvial words of the Koala menu system

Home

FAQ

Save Koalas

Gallery

Adopt

How many dimensions (directions) can you build in Flexbox ? 1 or 2 or 3

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout.

CSS Grid

What CSS Grid best used for

At dividing a page into major regions or defining the relationship in terms of size, position, and layer.

How many dimensions (directions) can you build in CSS Grid ? 1 or 2 or 3

CSS grid is a two-dimensional layout system, we can work withs rows and columns together, which means that it opens a lot of different possibilities to build more complex and organized design systems, without having to fall back to some “hacky ways” that we were using in the past.

You should consider using Flexbox when:

You have a small design to implement - If you have few rows or few columns you are using in your design, then flexbox is what you wanna use.
You need to align elements - Just by adding in display: flex; and defining the flex-direction that you want it'll help you elements when using flexbox!
You need a content-first design - If you are unsure about the content and how its going to look, flexbox would be perfect for that with its simple ideal layout system.

Write code to make a CSS Grid containing 4 boxes layout. The layout boxes should Use the semantic HTML5 elements with words in the boxes to match. Or to say another way. Build a simple application, and the barebones CSS Grid to include a layout of a header, an aside menu, main block content, and a footer.

Due to complications I had to make this in a different page the link is: Click Here

How many dimensions (directions) can you build in CSS Grid ? 1 or 2 or 3

2 dimensions