CSS Layouts Showdown: Grid vs Flexbox

🗃️Learn How to Create Flexible, Responsive Web Layouts Using CSS Grid and Flexbox Techniques

Flex:

The flex property is a shorthand in CSS used to define how a flex item grows, shrinks, and allocates space within a flex container. It combines flex-grow, flex-shrink, and flex-basis into a single property, making it easier to control the flexible behavior of items in a flex layout.

Flexbox (Flexible Box) is a layout model that arranges items in a line (either row or column). It simplifies aligning and distributing space among items within a container.

The CSS Flexbox Layout should be used for one-dimensional layout, with rows OR columns.

✏️Key Features of Flexbox:

• It allows you to organize items in either a row or a column.

• Flexbox simplifies creating responsive and adaptable layouts without relying on floats or positioning tricks.

• It provides control over alignment, spacing, and distribution of items, even when their size is dynamic or unknown.

A Flex Container with Three Flex Items

CSS Flexbox Components

A flexbox always consists of:

• a Flex Container - the parent (container) <div> element

• Flex Items - the items inside the container <div>

  

The CSS Flex Container

The CSS properties we use for the flex container are:

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

The CSS flex-direction Property

The flex-direction property specifies the display-direction of flex items in the flex container.

The flex-direction property can have one of the following values:

The CSS flex-wrap Property:

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The flex-wrap property can have one of the following values:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  </div>

.container{
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Result:

The CSS justify-content Property:

The flex-direction property specifies the display-direction of flex items in the flex container.

The CSS align-items Property:

The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).

center flex-start flex-end stretch baseline normal

The CSS align-content Property:

The align-content property is used to align the flex lines.

Note: The align-content property is similar to align-items, but instead of aligning flex items, it aligns the flex lines.

The align-content property can have one of the following values:

center stretch flex-start flex-end space-around space-between space-evenly

CSS Flex Items

CSS Flex Items are the direct children of a flex container that are arranged and aligned using Flexbox properties for flexible and responsive layouts. They can grow, shrink, and be ordered independently within the flex container.

The CSS properties we use for flex items are:

order flex-grow flex-shrink flex-basis flex align-self

Responsive Flexbox

Responsive Flexbox enables flexible layouts that adapt to different screen sizes by using flexible sizing, wrapping, and media queries to ensure content remains accessible and visually appealing across devices.

Grid📦

CSS Grid is a layout system in CSS that allows you to create complex, two-dimensional grid-based designs. It enables you to define rows and columns, positioning elements precisely within a grid structure for flexible and responsive web layouts.

CSS Grid is a powerful layout system that allows creating complex, multi-row and multi-column designs easily.

The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.

CSS Grid Layout Module:

Grid Container and Grid Items:

• a Grid Container - the parent (container) <div> element

• Grid Items - the items inside the container <div>

Example: Two-Column Layout with Grid

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

display: inline-grid || gird;
grid-template-columns: auto auto auto || auto auto auto auto ;

Result:

CSS Grid Columns, Rows and Gaps:

• column-gap

• row-gap

• gap

The grid-column-start and grid-column-end Properties

• grid-column-start

• grid-column-end

• grid-row-start

• grid-row-end

• grid-column

• grid-row

Example

Place the first grid item at row line 1, and let it end on row line 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

CSS Grid Container:

A grid container contains one or more grid items arranged in columns and rows. Direct child elements(s) of the grid container automatically becomes grid items. An element becomes a grid container when its display property is set to grid or inline-grid.

The grid-template-columns and grid-template-row Property:

The justify-content Property

The justify-content property is used to align the grid items when they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:

• space-evenly

• space-around

• space-between

• center

• start

• end

Comparison Between Flexbox and Grid 👇🏼

🙌 Thanks for Reading!

Hope this guide helped you understand file handling in Node.js. If you found it useful, feel free to share or reach out with feedback. Happy coding! 🚀📂💻

💬 Let’s Connect!

Have questions or want to connect professionally? I’d love to hear from you!

• 📬 Telegram

• 💼 LinkedIn