Flexbox and Grid Layout:

What is Flexbox?

Flexbox, or Flexible Box Layout, is a one-dimensional layout model that allows the creation of flexible and efficient designs in a row or column. It is particularly useful when working with child elements of a container and seeking a layout that dynamically adapts to the screen size or the content inside it.

Here is an example of how CSS flexbox is used:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

In this example, display: flex; turns the container into a flexible container, and justify-content and align-items control the distribution of child elements along the main and cross axes, respectively.

In the following project, you can see an example of how we could implement flexbox to align images and even work with media queries to achieve much more responsive images when viewing them on different screens. To avoid making this topic too long, the complete project with code and some comments explaining important points in flexbox is available at the following link:

As seen in the images, depending on the screen width, the positioning changes. In the first case, the width is 843 pixels, in the second 558 pixels, and in the third 335 pixels.

https://github.com/karlacabanas01/flexbox

And what is Grid Layout?:

On the other hand, Grid Layout is a two-dimensional layout system that allows the creation of grid structures. This approach is ideal when you want to organize elements in rows and columns, providing precise control over the placement and size of elements within the grid.

Example of Using Grid Layout:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

In this example, display: grid; sets the container as a grid container, and grid-template-columns defines the grid columns with flexible proportions. grid-gap adds space between the grid cells.

But, which one adapts better to our project?

If we want to see which to use or which adapts better to our requirements, we can look at the following table to get an idea:

What is CSS Grid?

👩🏻‍💻 Basic Concepts of CSS Grid

CSS Grid is a two-dimensional layout system that lets you control the arrangement of elements both in rows and columns precisely and flexibly.

To activate CSS Grid, simply set display: grid on the container you want to turn into a grid. Once the grid is activated, you can define columns and rows using grid-template-columns and grid-template-rows respectively. These properties allow you to specify the size and number of columns and rows, for example:

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}

Placing Elements in the Grid

You should use grid-column and grid-row to position elements in the grid.

Grid Lines: Understand that elements can be placed and aligned using numbered or named grid lines.

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

Responsive Design

Use fr units (Fractional Units) for adaptable columns and rows, employ the repeat() function to simplify creating multiple columns or rows, and use media queries to adjust the layout for different screen sizes.

.container {
  grid-template-columns: repeat(3, 1fr);
}

Alignment and Justification

align-items, justify-items, align-content, and justify-content to align and justify content inside the grid container and its cells.

.container {
  align-items: center;
  justify-items: center;
}

Grid Areas

Use grid-template-areas to create a layout based on area names, making it easier to place elements, and to assign elements to specific areas use grid-area.

.container {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

👩🏻‍💻 Advanced Grids

Subgrid

The concept of subgrid is an extension of the regular grid that allows child elements of a grid container to use the row and column definitions of the parent grid. This is especially useful in situations where you need to align the content of a nested grid component directly with the main grid.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid; /* The child's columns correspond to the parent's */
}

Function minmax()

The minmax() function allows you to specify the minimum and maximum size of rows and columns. It is particularly useful for responsive layouts, where dimensions need to adapt to different screen sizes, but without exceeding certain limits.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

Spacing between elements with gap

Previously known as grid-gap, the gap (along with row-gap and column-gap) allows you to define the space between rows and columns, making layout easier without affecting the padding or margins of individual elements.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Space between rows and columns */
}

auto-fill vs auto-fit

These two functions are used with repeat() to control how columns or rows are distributed in a grid container when the container size changes.

• auto-fill fills the container with as many cells of the specified size as possible, even if they are empty.
• auto-fit collapses empty cells and expands the remaining cells to occupy the available space.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

Advanced alignment and overlap control

CSS Grid offers detailed control over alignment with justify-self, align-self, justify-items, align-items, among others. Additionally, you can intentionally overlap elements by placing them in the same grid cells.

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}
.item2 {
  grid-column: 2 / 4;
  grid-row: 1;
}

Template-based layout with grid-template-areas

This property allows you to create a layout based on named areas, which greatly simplifies the design process, especially for complex layouts.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

📱 Media Queries and Responsive Design

As mentioned in the previous post, media queries and responsive design in CSS are key concepts that allow you to create websites that adapt to different devices and screen sizes.

Media Queries

They are a CSS feature that allows you to apply conditional styles based on the characteristics of the device or medium where the page is being viewed.

/* Styles for screens with a maximum width of 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Using Ranges and Logical Operators

Media queries are not limited to fixed breakpoints. You can use ranges and logical operators (and, not, only, or) to create more specific conditions. This allows you to fine-tune how and when certain styles are applied. For example:

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: blue;
  }
}

Combining Media Features

You can combine multiple features in a single media query to create very specific rules based on color, orientation, and other device factors:

@media (min-width: 600px) and (orientation: landscape) and (prefers-color-scheme: dark) {
  body {
    background-color: darkblue;
  }
}

Media Queries and CSS Grid

Integrating media queries with CSS Grid allows developers to redesign the layout of page elements more dynamically and adaptively based on the device size. For example, changing the number of columns in a grid based on the viewport width:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

Performance Optimization with Media Queries

Media queries can be used to optimize performance by loading resources only when necessary. For example, applying high-resolution background images only on large screens:

body {
  background-image: url('low-res.jpg');
}

@media (min-resolution: 2dppx) and (min-width: 1024px) {
  body {
    background-image: url('high-res.jpg');
  }
}

Mobile First

The Mobile First approach starts the design process with mobile devices and then expands to larger devices such as tablets and desktop computers. This method is especially beneficial for progressive web applications, where the mobile experience is prioritized due to the high rate of devices like cell phones.

Benefits of Mobile First:

• Content prioritization: By designing for mobile first, you are forced to focus on the essentials due to limited space, which improves the user experience by reducing information overload.
• Performance improvement: Loading only the necessary resources for mobile devices can reduce load times, which is crucial to maintaining user engagement on devices with less stable network connections.
• Improved SEO: Google prioritizes mobile indexing, so a mobile-optimized design can contribute to a better ranking in search results.

Desktop First

Desktop First takes the opposite approach, starting with a design that fits large screens and then adjusts for smaller screens. This approach can be ideal for complex business applications or e-commerce platforms with robust functionalities that are initially designed to be used in a desktop environment.

Benefits of Desktop First:

• Maximizing functionality: Allows designers to make the most of the features of more powerful devices from the start.
• Design flexibility: More screen space makes it easier to incorporate complex visual elements and advanced functionalities.

Responsive Design:

Refers to the practice of designing and developing websites so that they fluidly adapt to different screen sizes and devices.

• It is mainly used to ensure a consistent and optimal user experience, regardless of whether the user is using a device with a large, medium, or small screen, such as a desktop computer, tablet, or mobile phone.
• To achieve responsive design, media queries are commonly used along with relative units (such as percentages or em units), flexible images, and other CSS techniques.
• A basic example of responsive design could be adjusting the text size and changing the page layout to fit smaller screens, as shown in the following code:

body {
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Conclusion

In the world of web design, understanding and knowing how to implement Flexbox and Grid Layout along with Media Queries is essential to create sites that not only look good on any device but also function efficiently. Using strategies like Mobile First and Desktop First helps ensure that our website is optimized both for mobile users and those on desktop computers, adapting to their specific needs.

These tools are especially valuable in areas such as progressive web applications and e-commerce platforms, where the user experience can vary greatly depending on the device used. For example, in a mobile app, speed is key, while in an online store, ease of navigation takes greater importance.

🤯 Don’t miss what’s coming next! In the next post, we will dive into the exciting world of CSS animations, transformations, transitions, pseudo-classes, and pseudo-elements. We will explore how these advanced tools can bring your web projects to life and add a special touch, making them not only more interactive but also visually impressive.

Ready to take your web design skills to the next level?

At Kranio, we have experts in web development and design who will help you implement efficient solutions using Flexbox, Grid Layout, and Media Queries, ensuring your sites are responsive and optimized for all devices. Contact us and discover how we can drive the digital transformation of your company.