When in situations like these, the ideal approach is to understand both concepts – compare and contrast their strengths and weaknesses and then decide their most appropriate applications. This is exactly what this article will do with CSS media queries and container queries.

Table of Contents

• Responsive and Intrinsic Web Design
• What are media queries?
• What are container queries?
• Real-life comparison and key differences
• Which should you use and when?
• Conclusion

Responsive and Intrinsic Web Design

Before 2010, web developers could get away with creating websites that worked mainly on desktop. This was until Ethan Marcotte introduced the concept of Responsive Web Design (RWD). It's defined by MDN as a way to design for a multi-device web. This lead to the adoption of media queries as a component of RWD.

But lately there's been a shift towards what Jen Simmons defined as Intrinsic Web Design – the need for creating context-aware components. And container queries are making this possible.

What Are Media Queries?

Media queries are rules for applying specified styles to an element if certain conditions are met. They’re popularly used to ensure that websites are responsive on various devices by querying the viewport width.

Media queries are characterized by an @media rule followed by a condition in parentheses and an expression within brackets that will be applied if the indicated condition is met. So, if we wanted to change the background color of a div based on the viewport width of a device, this is how we might do that:

/* Mobile */
@media (max-width: 480px) {
  .mysite {
    background-color: red;
  }
}

In the sample code above, we’re asking for the

.header {
   container: mysite / inline-size;
}

@container mysite (min-width: 600px) {
   .maincard {
       grid-template-column: 1fr 1fr;
    }
   .item {
       background-color: green;
    }
}

Breakpoints mark the points at which a website's layout and content should change to ensure optimal user experience on devices ranging from smartphones and tablets to desktop computers.

It's really important for today's web designers to know how breakpoints work and use them smartly. This helps them create websites that work well on all kinds of devices and are easy for people to use.

In this article, we'll explore breakpoints in detail: why they matter, how to use them effectively, and their role in making websites adjust smoothly to different screen sizes.

Table of Contents

1. What is Responsive Web Design?
2. Why are Breakpoints Important in RWD?
3. Common Breakpoint Ranges for Responsive Design (2024)
4. Factors to Consider When Choosing the Right Breakpoints for Your Project
5. Basic Structure of a Media Query
6. Advanced Breakpoint Techniques
7. Conclusion

What is Responsive Web Design (RWD)?

Responsive Web Design (RWD) is an approach to web design that ensures web pages render well on a variety of devices and window or screen sizes.

It involves using fluid grids, flexible images, and CSS media queries to automatically adapt the layout and content of a website to the device's screen size and orientation.

The goal of responsive web design is to provide an optimal viewing and interaction experience, ensuring easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices, from desktop computers to mobile phones.

Why are Breakpoints Important in RWD?

Breakpoints are important in Responsive Web Design (RWD) because they define specific points where a website's layout and content should adapt to different screen sizes and devices.

Here’s why they are crucial:

Device Compatibility

Breakpoints enable websites to adjust their design and layout to ensure compatibility with various devices like smartphones, tablets, laptops, and desktops. This adaptability ensures that users have a consistent and optimized experience regardless of the device they use.

Optimal User Experience

Designers can use breakpoints to tailor the presentation of content, navigation, and functionality based on screen size. This customization enhances user experience by ensuring content is readable, accessible, and easy to interact with across devices.

Fluidity in Design

Instead of creating fixed-width designs that may not scale well, breakpoints allow for fluid grids and flexible elements. This approach ensures that the design remains visually appealing and functional, regardless of the screen dimensions.

Content Prioritization

With breakpoints, designers can prioritize and reorganize content based on device capabilities and user needs. This ensures that essential information remains accessible and prominent, enhancing usability and engagement.

Performance Optimization

Breakpoints make websites load faster and work better on different devices by adjusting how they look and work based on each device's size and type. This is crucial for retaining user interest and reducing bounce rates, particularly on mobile devices with slower internet connections.

SEO Friendliness

Responsive websites with well-implemented breakpoints provide a seamless user experience across devices. Search engines value responsive design because it improves accessibility and usability, potentially leading to better search engine rankings.

Common Breakpoint Ranges for Responsive Design (2024)

In 2024, responsive web design commonly employs a mobile-first approach, ensuring websites are designed to function and look good on smaller screens before scaling up.

Here are the typical breakpoint ranges used for different screen sizes:

Extra Small Screens (Mobile):

• Range: Up to 576px viewport width
• Description: Targets smartphones and small mobile devices in portrait mode.

Small Screens (Tablets):

• Range: 577px to 768px viewport width
• Description: Includes larger smartphones and smaller tablets in portrait mode.

Medium Screens (Large Tablets):

• Range: 769px to 1024px viewport width
• Description: Targets larger tablets and smaller desktop screens in landscape mode.

Large Screens (Desktops):

• Range: 1025px to 1440px viewport width
• Description: Targets standard desktop screens and larger laptops.

Extra Large Screens (Large Desktops):

• Range: 1441px and above viewport width
• Description: Includes large desktop monitors and wide-screen displays.

Example CSS Media Queries:

/* Example of CSS media queries for common breakpoint ranges */

/* Extra Small Screens (Mobile) */
@media only screen and (max-width: 576px) {
  /* CSS rules specific for extra small screens */
  .container {
    width: 100%; /* Adjust layout for full-width on small screens */
  }
}

/* Small Screens (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  /* CSS rules specific for small screens */
  .container {
    width: 80%; /* Adjust layout for smaller container width on tablets */
  }
}

/* Medium Screens (Large Tablets) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS rules specific for medium screens */
  .container {
    width: 70%; /* Adjust layout for moderate container width on large tablets */
  }
}

/* Large Screens (Desktops) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  /* CSS rules specific for large screens */
  .container {
    width: 60%; /* Adjust layout for narrower container width on desktops */
  }
}

/* Extra Large Screens (Large Desktops) */
@media only screen and (min-width: 1441px) {
  /* CSS rules specific for extra large screens */
  .container {
    width: 50%; /* Adjust layout for even narrower container width on large desktops */
  }
}

In this example:

• Each media query targets a specific range of viewport widths to adjust the layout and styling of the .container element accordingly.
• The percentages used for width in the examples demonstrate how designers can progressively adjust content presentation to optimize user experience across various devices and screen sizes.

Factors to Consider When Choosing the Right Breakpoints for Your Project

Choosing the right breakpoints for your project involves considering several factors:

Target Audience and Devices

Understand the devices your target audience uses. This includes screen sizes of smartphones, tablets, laptops, and desktops. Prioritize breakpoints that align with these devices to ensure a seamless user experience.

Content Complexity

Evaluate how your content responds to different screen sizes. Complex layouts may require additional breakpoints to maintain readability and usability across devices.

Design Requirements

Your design specifications play an important role. Consider breakpoints that accommodate specific design elements such as navigation menus, images, forms, and grids. Ensure that these elements adapt well to different screen sizes.

Analyzing Device Usage Statistics

Use analytics to determine the most common screen sizes among your audience. Focus on breakpoints that optimize user experience on these prevalent devices.

Basic Structure of a Media Query

Implementing breakpoints with media queries is essential for creating responsive web designs that adapt to different screen sizes and devices.

A media query allows you to apply CSS styles based on certain conditions, such as screen width, height, device orientation, etc. The basic syntax of a media query is:

@media media-type and (media-feature) {
  /* CSS styles */
}

Where:

• media-type specifies the type of media, typically screen for devices with screens.
• media-feature defines the condition, such as width, min-width, max-width, orientation, and so on.

Now let's talk about how you can structure and use media queries effectively.

Using min-width and max-width for Breakpoints

The most common approach to defining breakpoints is using min-width and max-width media features.

min-width: Specifies the minimum width at which the styles should apply. It targets screens wider than the specified width.

Example:

@media screen and (min-width: 768px) {
  /* Styles for screens wider than 768px */
}

max-width: Specifies the maximum width at which the styles should apply. It targets screens narrower than the specified width.

Example:

@media screen and (max-width: 1024px) {
  /* Styles for screens narrower than or equal to 1024px */
}

Media Queries for Different Breakpoint Ranges

To create a responsive design that adapts to various devices, you typically define multiple breakpoints to cover different screen sizes:

Small Screens (Mobile Phones):

@media screen and (max-width: 576px) {
  /* Styles for small screens */
}

Medium Screens (Tablets):

@media screen and (min-width: 577px) and (max-width: 992px) {
  /* Styles for medium screens */
}

Large Screens (Desktops and Laptops):

@media screen and (min-width: 993px) {
  /* Styles for large screens */
}

Extra Large Screens (Large Desktops and Monitors):

@media screen and (min-width: 1200px) {
  /* Styles for extra large screens */
}

Example: Comprehensive Media Queries

Here’s an example of how you might implement media queries for a responsive layout:

/* Default styles for all screens */
body {
  font-size: 16px;
}

/* Small screens (phones) */
@media screen and (max-width: 576px) {
  body {
    font-size: 14px;
  }
}

/* Medium screens (tablets) */
@media screen and (min-width: 577px) and (max-width: 992px) {
  body {
    font-size: 16px;
  }
}

/* Large screens (desktops and laptops) */
@media screen and (min-width: 993px) {
  body {
    font-size: 18px;
  }
}

/* Extra large screens (large desktops and monitors) */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

In this example:

• Font sizes adjust based on the screen size to ensure readability and optimal user experience.
• Each media query targets specific ranges of screen widths using min-width and max-width.
• Adjustments in font size are used here for demonstration purposes, but you can apply any CSS styles needed for your design.

Advanced Breakpoint Techniques

Implementing advanced breakpoint techniques enhances the responsiveness and adaptability of your web designs.

Here are several techniques you can use:

1. Container Queries (Adapting to Content Width)

Container queries allow elements to respond not to the viewport size but to their own container's dimensions. This is particularly useful when you want elements to adapt based on their parent container's width rather than the overall screen width.

Example using a hypothetical container query syntax (not currently natively supported, but evolving in standards like CSS Houdini):

.container {
  /* Apply styles based on container width */
}

@container (min-width: 600px) {
  .container {
    /* Adjust styles for containers wider than 600px */
  }
}

Container queries are highly anticipated as they provide more granular control over responsive design within individual components or sections.

2. Flexible Units (ems, rems) for Responsive Layouts

Flexible units like em (relative to the font-size of the element) and rem (relative to the font-size of the root element) are essential for creating scalable and responsive layouts.

Using em and rem:

• em units scale relative to their parent element's font size. This can be useful for creating modular designs where elements resize proportionally.
• rem units are relative to the root element (html), providing a consistent base for scaling across the entire document.

/* Example using rem for scalable font sizes */
body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2rem; /* 32px on 16px base */
}

p {
  font-size: 1.5rem; /* 24px on 16px base */
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px; /* Adjust base font size for smaller screens */
  }
}

3. Using CSS Grid and Flexbox for Responsive Design

CSS Grid and Flexbox are powerful layout tools that offer flexible and responsive design options.

CSS Grid: Ideal for two-dimensional layouts, allowing precise control over rows and columns. Grids can adapt to different screen sizes with media queries or grid-auto-flow properties.

Example of responsive grid layout:

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

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Flexbox: Best for simpler one-dimensional layouts or aligning items within a container. It’s great for navigation bars, sidebars, and elements within a grid cell.

Example of responsive Flexbox layout:

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

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

• Container Queries are evolving and promise more precise control over responsive design elements based on their container's size.
• Flexible Units (em, rem) allow scalable and accessible typography and layout proportions across various screen sizes.
• CSS Grid and Flexbox provide robust layout options for creating responsive designs that adapt to different devices and viewport sizes.

Conclusion

In conclusion, breakpoints play a pivotal role in crafting a responsive web design that adapts seamlessly across different devices and screen sizes.

The flexibility offered by media queries, utilizing min-width and max-width to define breakpoints, allows for precise control over how content and layouts respond to varying viewport dimensions.

Advanced techniques like container queries (as they evolve), flexible units (em, rem), and leveraging CSS Grid and Flexbox further enhance the adaptability and scalability of designs.

In essence, breakpoints are not just technical specifications but critical decisions that impact user interaction and satisfaction.

Connect with me on LinkedIn.

This is a perfect resource for you if you are a beginner web developer. It'll also be useful if you're an experienced developer who wants to brush up on your responsive web design skills.

Table of Contents

• What is Flexbox?

• What are the benefits of using Flexbox?

• The main axis and the cross axis

• Flex Containers and Flex Items

• Understanding Flex and Inline-flex

• display: flex

• display: inline-flex

• The Flex Container Properties

• The flex-direction Property

• The flex-wrap Property

• The flex-flow Shorthand Property

• The justify-content Property

• The align-items Property

• The align-content Property

• The place-content Property

• The Flex Items Properties

• The order Property

• The align-self Property

• The flex-grow Property

• The flex-shrink Property

• The flex-basis Property

• The flex Shorthand Property

• Flexbox Gaps

• How to Center an Element With Flexbox

• Practice with Flexbox Games

• Are There Bugs in CSS Fexbox?

• Conclusion

What is Flexbox?

Flexbox is short for "Flexible Box Layout". It's a CSS layout model that simplifies creating complex layouts. It provides a flexible way to align elements and distribute space within a container element.

The Flexbox layout model is bidirectional. This means you can either arrange your elements in rows, columns, or both. More on that later.

What are the benefits of using Flexbox?

Before Flexbox, it was hard to create complex layouts and responsive web pages. You needed a combination of CSS floats and position properties. This required many workarounds and hacks.

But with Flexbox, you can now do the following with less difficulty and fewer lines of code:

• Align and center elements using properties like justify-content and align-items.

• Develop responsive layouts without writing lots of media queries.

• Reorder elements without changing the HTML structure

• Create same-height columns without any extra HTML elements or background images.

Now you know what Flexbox is, along with some of the things you can do with it. Let's see how you can use it.

The main axis and the cross-axis

The first thing you need to understand about Flexbox is the concept of axes. Every flex container (an element with a display property set to flex or inline-flex) has a main axis and a cross axis.

The main axis is either horizontal or vertical depending on the value of the flex-direction. No worries if you are not familiar with flex-direction. You are about to learn it.

The cross axis and main axis when the flex-direction is row

In this example, the main axis is horizontal and the cross axis is vertical.

The following is an example where the the main axis is vertical and the cross axis, is horizontal.

The main axis and cross axis when the flex-direction is column

Flex Containers and Flex Items

To use all of Flexbox's properties, you need to set the display property for an element to flex or inline-flex.

This turns the element into a flex container, and the children of that element become flex items.

Here's an example:

<section class="container">  
    <div>Flex Item 1</div>  
    <div>Flex Item 2</div>  
    <div>    
        <p>This paragraph is not a flex item</p>  
    </div>
</section>

.container {  
  display: flex;
}

The .container element is now a flex container. The three div elements are direct children of the .container element, which makes them flex items.

But the paragraph element inside the third div is not a flex item. This is because it's not a direct child of the .container element.

Understanding flex and inline-flex

You can use both flex and inline-flex to make an element a flex container. The difference is in how they interact with surrounding elements.

display: flex

This makes the flex container behave like a block-level element. The flex-container takes up the entire available width of its parent element. It starts on a new line, and the element that comes after it also starts on a new line.

Example:

<button>Button One</button>

/* Flex Container */
<section class="container">  
    <div id="red"></div>  
    <div id="gold"></div>  
    <div id="green"></div>
</section>

<button>Button Two</button>

.container {
    display: flex;
}

Flex containers behave like block elements when you use display: flex

The .container element takes up the entire available width of the body (its parent element).

display: inline-flex

This makes the flex-container behave like an inline-level element. This allows other inline elements (like buttons) to flow alongside it. Using the previous example, this is how the elements will be arranged when you change display from flex to inline-flex.

Flex containers behave like inline-elements when you use display: inline-flex

The flex container does not take up the entire width of its parent. It uses only as much horizontal space as necessary for its content.

Practice using flex and inline-flex on StackBlitz

The Flex Container Properties

The flex container properties allow you to control the layout and alignment of the flex items within a flex container.

NOTE: You apply these properties on the flex container, and not on its items.

The following are the flex container properties:

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

• place-content

The flex-direction Property

The flex-direction property defines the direction for displaying the flex items. It is what sets the flex container's main axis. This property can take any of these four values:

• row (default value)

• column

• row-reverse

• column-reverse

Now, let's look at some examples to see how it all works.

In the following code snippet, we have a names-container with four names:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>
</div>

Let's see the different ways you can arrange the names using the flex-direction property.

flex-direction: row

This displays the flex-items horizontally from left to right.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles here... */
}

Example of flex-direction: row

flex-direction: column

This displays the flex-items vertically from top to bottom.

Example of flex-direction: column

flex-direction: row-reverse

This is the opposite of the row value. It displays the flex items from right to left.

Example of flex-direction: row-reverse

flex-direction: column-reverse

This is the opposite of the column value. It displays the flex items from the bottom to the top.

Example of flex-direction: column-reverse

Practice using flex-direction on StackBlitz

A note on the reverse values and accessibility:

There's something you need to keep in mind when you use row-reverse and column-reverse. As you've already seen, both affect the visual order of elements on the screen.

But the order in your HTML remains unchanged. And that is the order that screen readers and keyboard navigation controls use.

In the example, when you use row-reverse, you see Jack's name first on the screen, followed by Jane, John, and Jill.

But for someone using a screen reader, they will hear the names as they appear in the HTML and not as they appear on screen. In this case, they will first hear Jill's name, followed by John, Jane, and Jack.

The flex-wrap Property

Sometimes, the space within the flex container will not be enough for the flex items.

In such cases, you use the flex-wrap property to choose whether to let the flex-items overflow or begin on a new line.

The flex-wrap property accepts any of the following values:

• nowrap (default value)

• wrap

• wrap-reverse

To see flex-wrap in action, let's add four more names to our names-container:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>  
    <p id="sara">5. SARA</p>  
    <p id="seth">6. SETH</p>  
    <p id="seal">7. SEAL</p>
</div>

flex-wrap: nowrap

This keeps all the flex items on a single line either in a row or column. It allows the flex items to overflow if there's not enough room in the flex container. See the example below:

.names-container {  
    display: flex;  
    flex-direction: row;  
    flex-wrap: nowrap;  
    /* Other styles here... */
}

Flex items overflows because flex-wrap is set to nowrap

In this example, three names overflow out of the container because there is not enough space for them.

flex-wrap: wrap

This will wrap or push the flex items to the next line if there's not enough room for them.

Flex items wrap or moves to the next line when flex-wrap is set to wrap

flex-wrap: wrap-reverse

This is the opposite of wrap. It moves the overflow items to the next line but in a reverse direction.

For example, using wrap-reverse on the names container moves overflow items to the next top line instead of the next line below.

Example of flex-wrap: wrap-reverse

Practice using flex-wrap on StackBlitz.

The flex-flow Shorthand Property

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. This means that when you use flex-flow, you can apply both properties with only a single line of code.

See the example below using the names container. You can give the container flex-direction and flex-wrap properties.

.names-container {  
    display: flex;  
    flex-direction: column;  
    flex-wrap: wrap;
}

Or you can use the flex-flow shorthand to get the same result.

.names-container {  
    display: flex;  
    flex-flow: column wrap;
}

Example of flex-flow: column wrap

Practice using flex-flow on StackBlitz.

The justify-content Property

This justify-content property handles the alignment of flex items on the main axis of the flex container.

You can use it to take care of how space is distributed on the main axis. This property takes any of the following values:

• flex-start (default value)

• flex-end

• center

• space-between

• space-around

• space-evenly

justify-content: flex-start

This places the items at the start of the flex-direction. If the main axis is horizontal with a flex-direction of row (like the example below), it aligns the items to the left. And if it's vertical (with a flex-direction of column), it aligns the items to the top.

Using the names container example, this is how justify-content: flex-start would look like:

.names-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles here... */
}

Example of justify-content: flex-start

justify-content: flex-end

This will place the flex items at the end of the flex-direction of the main axis.

Example of justify-content: flex-end

justify-content: center

This places the flex items at the center of the flex container's main axis.

Example of justify-content: center

justify-content: space-between

This will place the first flex item at the start of the main axis. And also place the last item at the end of the main axis. Then space on the main axis is distributed equally among the the elements.

Example of justify-content: space-between

justify-content: space-evenly

This distributes space equally among the flex items. This means the space before and after each item is the same.

Example of justify-content: space-evenly

justify-content: space-around

This also distributes space equally between the flex items. The key difference here is that the space before the first item and after the last item is half the space between the flex items.

Example of justify-content: space-around

Practice using justify-content on StackBlitz.

The align-items Property

The align-items property handles the alignment of flex items on the cross-axis of the flex container. It can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• baseline

align-items: stretch

This stretches the flex items to fill up the space within the flex-container.

See the example below using a new names container with name cards of different sizes:

.names-container {  
    display: flex;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-items: stretch

align-items: flex-start

This will place the flex items at the start of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-start will place the items at the top.

.names-container {  
    display: flex;  
    align-items: flex-start;  
    /* Other styles here... */
}

Example of align-items: flex-start

align-items: flex-end

This will place the flex items at the end of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-end will place the items at the bottom.

.names-container {  
    display: flex;  
    align-items: flex-end;  
    /* Other styles here... */
}

Example of align-items: flex-end

align-items: center

This aligns flex items at the center of the cross-axis of the flex container.

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles here... */
}

Example of align-items: center

align-items: baseline

When you use the baseline value, flex items are arranged such that their baselines are aligned. See the example below:

.names-container {  
    display: flex;  
    align-items: baseline;  
    /* Other styles here... */
}

The baseline is indicated with the dotted white line

Practice using align-items on StackBlitz.

The align-content Property

When you have a flex container with wrap (or more than one flex line), you may need to align the lines to distribute the space as you want. That is when you use align-content. This property can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• space-between

• space-evenly

• space-around

In the example below, there are 11 names in the names container. And the names container element has a flex-wrap value of wrap. This means you can apply the align-content property to change the alignment of the flex lines.

align-content: stretch

This stretches the flex lines to fill up the space within the flex container's cross-axis.

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-content: stretch

align-content: flex-start

This places the flex lines at the start of the container's cross-axis. For example, if the cross axis is vertical like that of the names container, it will place the flex lines at the top.

Example of align-content: flex-start

align-content: flex-end

This places the flex lines at the end of the container's cross-axis.

Example of align-content: flex-end

align-content: center

This places the flex lines at the center of the container's cross-axis.

Example of align-content: center

align-content: space-between

This will place the first flex line at the start of the cross-axis. It also places the last flex line at the end of the cross axis. Then space on the cross-axis is distributed equally between the the lines.

Example of align-content: space-between

align-content: space-evenly

This distributes space equally between the flex lines. This means the space before and after each line is the same.

Example of align-content: space-evenly

align-content: space-around

This also distributes space equally between the flex lines. The key difference here is the space before the first line and after the last line is half the space between the flex lines.

Example of align-content: space-around

Practice using align-content on StackBlitz.

The place-content Property

If you need to use both the justify-content and align-content properties, you use the place-content shorthand property.

It can take one or two values. When you give it a single value, the browser will apply the same value for both justify-content and align-content.

And when you give 2 values for place-content, the first value will be for align-content and the second for justify-content.

Let's look at an example:

Instead of writing this:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-content: flex-end;  
    justify-content: flex-start;  
    /* Other content */
}

You can instead write the following and it will have the same effect:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    place-content: flex-end flex-start;  
    /* Other content */
}

Example of using the place-content shorthand

Practice using place-content on StackBlitz.

The Flex Item Properties

Every direct child of a flex container is a flex item. So far, you've learned the properties of the flex containers.

Flexbox also has properties that you can apply to individual flex items. They include the following:

• order

• align-self

• flex-grow

• flex-shrink

• flex-basis

• flex

The order property

The order property determines the order of appearance for the flex items.

The value you give to this property must be a number. A flex item with a lower number will appear before one with a higher number.

In the HTML code, the order for the four names is as follows:

1. Jill

2. John

3. Jane

4. Jack

<div class="names-container">
    <p id="jill">1. JILL</p>
    <p id="john">2. JOHN</p>
    <p id="jane">3. JANE</p>
    <p id="jack">4. JACK</p>
</div>

You can change the order of appearance on the screen using the order property. See the example below.

Here's how they appear with no order properties:

Name cards before add the order property

Now, see how they appear when you add the following order properties:

.names-container {  
    display: flex;
}

#jill {  
    order: 2;  
    background-color: #fe4f46;
}

#john {  
    order: 4;  
    background-color: #fcd65c;
}

#jane {  
    order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
    order: 3;  
    background-color: #003f54;
}

The order property changes the order of appearance

Practice using the order property on StackBlitz.

Word of caution: Even though the order of appearance changes on screen, the order in the HTML remains unchanged. And it's the order in the HTML that screen readers use. Where possible, it's best practice to change the order in the HTML rather than doing it with Flexbox.

The align-self property

You can use the align-self property to give a flex item a different alignment from the other items.

It works the same way as the align-items property. The difference is that whereas align-items applies to all flex items, the align-self property is applied to only specific items.

Example:

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles */    
}

#jill {
    align-self: flex-start;
}

Example of align-self with a flex-start value

In the example, the align-items property for the names container has a value of center. This aligns all the names at the center.

But using the align-self property, you are able to align Jill's name card to the top with a value of flex-start.

Practice using the align-self property on StackBlitz.

The flex-grow property

When you set a container's display to flex, often there will be some extra space after the items are arranged. See the example below:

.names-container {  
    display: flex;  
    justify-content: 
    flex-start;  
     /* Other styles */
 }

The flex container has more than enough space for the flex items

The browser treats the extra as a value of 1. This means when you give a flex-grow value of 0.5 to only one of the flex items, the browser will add half of the remaining space to the item's size.

#jill {
    flex-grow: 0.5;
}

The flex-grow property makes the Jill's larger than its initial size

And if you add a flex-grow value of 1 to only one of the flex items, the browser will add all the extra space to that item.

NOTE: If only one item in the container has a flex-grow value, then any value of 1 or more will make it take up all the extra space.

For example, the two code snippets below will have the same effect on Jill's card:

#jill {  
    flex-grow: 1;
}

#jill {  
    flex-grow: 99;
}

When only one card has a flex-grow of 1 or more

What happens when you add flex-grow values to more than one element?

The browser will share the extra space proportionately for them.

For example, when you give Jane a flex-grow of 3 and Jack a flex-grow of 1, the browser will share the extra space with a 3:1 ratio.

This means the total value of the extra space becomes 4 (3+1). Jane will then get 3/4 of the extra space. And Jack will get 1/4 of it.

The extra space is shared proportionately betwee Jane and Jack

Practice using the flex-grow property on StackBlitz.

The flex-shrink property

The flex-shrink property is the opposite of flex-grow.

You use flex-grow when you want to increase the flex item's size if there's extra space. But, you use flex-shrink when you want to decrease the flex-item's size if there's not enough space in the flex container.

See the example below:

<div class="numbers-container">
    <p id="one">1</p>
    <p id="two">2</p>
    <p id="three">3</p>
    <p id="four">4</p>
</div>

.numbers-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles */
}

#one {  
    flex-shrink: 2;  
    background-color: #fe4f46;
}

The first card shrinks to make room for the others

In the example, each of the four numbers has a width of 150px (that's a total of 600px). But the numbers-container has a width of 400px which is not enough.

The cards have to shrink to fit in the available space. But Number 1 which with a flex-shrink value of 2 shrinks to become twice as small as the other numbers.

What if you don't want a flex item to shrink?

To prevent a flex item from shrinking, give it a flex-shrink value of 0.

For example, when you give Number 1 a flex-shrink of 0, it will maintain the width of 150px. And the other flex items will shrink to fit in the remaining space.

The first card does not shrink because it has a flex-shrink value of 0

Practice using the flex-shrink property on StackBlitz.

The flex-basis property

You can use the flex-basis property to set the default length of a specific flex item. This is either the width or height of the item depending on the flex-direction.

If the flex-direction is row or row-reverse, the value for flex-basis becomes the initial width of the item.

And if flex-direction is column or column-reverse, then the value for flex-basis becomes the initial height of the item.

Example:

.names-container {  
    display: flex;  
    flex-direction: column;  
    /* Other styles */
}

div {  
    height: 20px;
}

#jane {  
    flex-basis: 60px;
}

Example of flex-basis setting the height of an item

In the example, the height for the divs is set at 20px. But Jane gets a flex-basis value of 60px. And that overrides the 20px given to all the divs.

Note: The flex-basis of 60px becomes the height for Jane because the flex direction is column. This means the main axis is vertical.

Here is another example. This time, the flex-direction is row. This means the flex-basis will set the width of the item.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles */
}

div {  
    width: 70px;
}

#jane {  
    flex-basis: 140px;
}

Example of flex-basis setting the width of an item

While all the other divs have a width of 70px, Jane has a width of 140px set by the flex-basis.

Practice using the flex-basis property on StackBlitz.

The flex Shorthand Property

You can use flex as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

For example, instead of writing the following:

.flex-item {  
    flex-grow: 2;  
    flex-shrink: 0;  
    flex-basis: 50px;
}

You can use the shorthand like so and it will have the same effect:

.flex-item {  
    flex: 2 0 50px;
}

The flex property can take up to three values. The order of the values is important. The browser assigns the first value for flex-grow, the second for flex-shrink, and the third for flex-basis.

The default values for flex are 1 0 auto.

This means if you give flex a single value of 2, the browser uses 2 for flex-grow. And then it sets flex-shrink to 0 and flex-basis to auto.

Practice using the flex property on StackBlitz.

How to Center an Element With Flexbox

One of the headaches for many front-end developers is centering elements. Flexbox has a perfect solution for that.

There are two steps involved.

1. Make the parent element a flex container by setting display to flex.

2. Give a value of center to both justify-content and align-items.

That's it! Your element will be perfectly centered.

Example:

<div class="name-container">  
    <p>JOHN</p>
</div>

.name-container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    /* Other Styles */
}

Example of centering an element with Flexbox

Whether you're trying to center text, images, or even an entire navigation bar, this will work just fine.

Flexbox Gaps

You can use the gap property to adjust the space between flex items.

NOTE: You apply the gap property on the flex container and not the flex items.

gap can take two values: the first value for gaps between the rows and the second value for gaps between the columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 50px 10px; 
    /* row-gap column-gap */
}

Example of giving two values for the gap property

If the gap you want between the rows and the columns is the same, you can use a single value. The browser will apply the same value to both rows and columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px; 
    /* Other Styles */
}

Example of using only one value for both rows and columns gap

You can also use the properties row-gap if you need to apply a specific gap value between only the rows. and column-gap if you need to add gaps between only the columns.

Example: Adding gaps between only the rows:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    row-gap: 20px; 
    /* Other Styles */
}

Example of using row-gap

Example: Adding gaps between only the columns:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    column-gap: 20px; 
    /* Other Styles */
}

Example of using column-gap

Practice using the gap property on StackBlitz.

Practice with Flexbox Games

Want to practice Flexbox in an interactive way? Check out the following games. They provide a hands-on experience for practicing Flexbox in a fun and engaging way.

• Flexbox Froggy

• Flexbox Defense

• Flexbox Zombies

Are There Bugs in CSS Flexbox?

While CSS Flexbox is a powerful layout tool, it's got a few bugs that may surprise you.

A common example is that some HTML elements cannot act as flex containers. These include the <button>, <fieldset>, and <summary> elements.

The workaround is to use an element like a div to wrap around the element's children. Then use Flexbox on the wrapper div.

If you are curious about other Flexbox bugs and workarounds, you can have a look at the Flexbugs repository on GitHub.

Conclusion

In this guide, you learned all the Flexbox properties, their values, and how to use them to create responsive layouts. You also learned about some games like Flexbox Froggy you can use for practice.

Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

Let's say you need to order food – you can do so instantly via the company's app. Maybe you need government services – the same thing applies. You can even get medical emergency dial services via an app.

There's an app for everything – from banking to studying and from trading to shopping. Every business has an app, and even our governments have simplified their services into app form.

Hold on, building and maintaining an app is cumbersome, and it's quite expensive for small businesses, so how do they manage?

Well it's simple: with the help of advancements in technology there is an option that helps small businesses out. This option combines the features of an app with the technology used in web development to build affordable services for businesses – I'm talking about Progressive Web Apps.

Let's dive in and get a better understanding of what PWAs are all about.

What is a Progressive Web App?

Progressive Web Applications (PWAs) are apps built with web technologies that we probably all know and love, like HTML, CSS, and JavaScript. But they have the feel and functionality of an actual native app. Wait a minute! Native Apps, what do we mean by this?

A Native App is a software application built in a specific programming language for a specific device platform, either IOS or Android.
PWAs are built with the capabilities like push notifications and the ability to work offline. They are also built on and enhanced with modern APIs which makes it easy to deliver improved capabilities along with reliability and the ability to install them on any device.

PWAs takes advantage of the huge web ecosystem this is inclusive of the plugins, and community and the relative ease of deploying and keeping a website contrary to a native application which is pretty difficult to develop. This means you can build a PWA quickly and easily.

With its popularity many companies have shifted into the product, I tend to believe that this is because of its ability to run on an android and iOS without much difference. Some good examples of top companies who have their products as PWAs include: Twitter, Pintrest, Uber, Tiktok, Spotify, Jumia (a leading e-commerce site in Africa) etc...

A common feature about this products is that they are all installable on your home screen, able to work offline from where you last left and offer a comparable experience and features to their native apps.

Just like when building a native mobile app there are some expectations that should be met to make a good product for consumer use, the same thing applies to PWAs. Let's discuss what makes a good PWA.

Characteristics of PWAs

Below is what should be considered when developing a PWA:

Responsiveness

Different companies produce gadgets with different screen sizes, and as a developer it's your responsibility to ensure all the different users enjoy the product regardless the device they are using. So it's a good idea to make sure your app can be used on any screen size and it's content is available at any view-port size.

Installable

Research has shown that users tend to engage more with installed apps compared to visiting the official sites. Having a PWA as your product gives the users the look, feel and engagement of a normal app.

Independent Connectivity

By keeping a user engaged to your app even while they are offline, provides a more consistent experience than dropping them back to a default offline page.

A good example to illustrate this will be that of a music app, your users should be able to access offline playback and listen to saved music even without internet connection. Another good example is twitter app, a user is able to go back a read through tweets which they might have missed.

Discoverability

Since most PWAs are converted websites, it is fair to make them discoverable on the search engines, this will help generate extra traffic to your app. This also acts as an advantage over native apps which can't be discovered over the search engines.

Appearance

The appearance of the app should feel and look like that of a normal app, so be sure to include things like an app icon, this will help make it easily recognizable also things like splash screen will add the touch and feel of an app.

Cross Platform

PWAs are developed as web app first, which means that they need to work on all browsers/systems and not just a selected few. Users should be able to use them in any browser before they decide to install them.

So folks! there you have it, the general info about PWAs. Along the way you might have noticed occasionally a comparison between PWAs and Native App and this might have confused you a bit, Well let's clear the airwaves by checking the comparison between the two to get a clear understanding.

Differences Between PWAs and Native Apps

Development Cost

PWAs are cheaper to develop compared to Native AppsWhen you're developing a native app, you'll have to learn a certain programming language and then build a version of the app for each type of device, Android and iOS. On the other hand you can choose to hire a experienced professional to do the work for you which will even turn out to be more costly.

Down the road, you will also need resources to maintain and update the app, which means lots of money and time is required.

In the case of a PWA, you can have a single codebase for the different platforms. It's also time-saving since you will not need to develop it from scratch you can configure your current web site to fit.

And if you choose to hire developer it will only be one compared to native where you can hire up-to two depending on where you need your app.

Discoverability

Native apps cannot be indexed by the search engines, they can just be found through the App/Play store's website. You can make your app more discoverable on the App/Play store by using App Store Optimization(ASO), but that's another story.

Unlike native apps, PWAs work like websites so they can be indexed by search engines. This helps them rank better in search results.

Safety

Nowadays in order to run a website, it should be encrypted with a SSL certificate, this adds an extra layer of security. Now, as we already know PWAs are site converted into app which means they are more secure because they run on HTTPS. These are security protocols that allow safe exchange of data between client and server so that is doesn't get tampered with.

To secure your native apps, you need to implement various security measures, like multi-factor authentication and so on.

Installation and Download

Native apps need to be downloaded and installed from an app store. This requires some commitment from the user to do it from start to finish. Users have to pass and check multiple permissions before installing an app.

On the other hand, PWAs don't require any of those steps. From the browser you can bookmark it and add the app to your home screen with just a few taps.

Benefits of PWAs

A lot of organizations both private and public are switching to PWAs not only because they are cheap to develop but also because they offer greater engagement.
Now let's look at a quick summary of the benefits of a PWA:

• They are responsive and work with many different screen sizes.
• They can run on multiple platforms and any device with a modern web browser.
• They function just like normal Native Apps.
• The updates are independent, you don't need to visit the play store for an update.
• They're built with common web technologies.
• They're fast and lightweight.
• They work offline unlike other sites.
• They are discoverable via search engine.
• They are easily installable.
• Low maintenance cost.

Requirements to Get Started with PWA Development

It does not take much to get started building a PWA. You just need a few things and you are good to go.

Tools
The best known technology stack to develop PWAs is AngularJS. Speaking of Angular, here is a resourceful guide on how you can convert your already existing Angular app into PWA. Others stacks include ReactJS and Polymer.

HTTPS
You will need a server with a HTTPS connection. This makes sure your user's data is secure. It adds an extra layer of security to you site.

Application Shell
It provides a good first impression when your app loads. In simpler words this is what the user sees when they interact with your app for the first time.

Service workers
This is one of the key technologies behind PWAs. They help support your app work offline, and they perform advanced caching and run background tasks. Service workers can complete tasks even when your PWA is not running.Some other functions associated with Service Worker include:

• Sending push notification
• Badging icons
• Running background fetch tasks etc...

Manifest file
This is a JSON file that is created with a Web App Manifest Generator. This file contains the information that tells how your PWA should appear and function. It allows you to determine the name, description, icon, colors and other features of your PWA. Here's an example of a manifest file:

{
"short_name": "DevBlogger",  
"name": "DevBlogger",  
"description": "All dev stories under one roof",
"theme_color": "#eb5252",  
"background_color": "#000000",  
"display": "fullscreen",  
"Scope": "/",  "orientation": "portrait",  
"icons": [    
    {
        "src": "images/android/android-launchericon-48-48.png",      
        "type": "image/png",      
        "sizes": "48x48"
    },
    {      
        "src": "images/android/android-launchericon-96-96.png",
        "type": "image/png",      
        "sizes": "96x96"    
    },    
    {      
        "src": "images/android/android-launchericon-192-192.png",
        "type": "image/png",      
        "sizes": "192x192"    
    }  
   ],  
       "start_url": "index.html?utm_source=homescreen"
  }

• Audit your App
  This is possible using the Google Lighthouse tool. Google Lighthouse is a open-source software that anyone can use on any webpage. Google is a big champion of PWAs and pushes them as the future of the web. You can use Lighthouse to help you see how fast, accessible, and SEO readiness your PWA is.

How to Build a PWA

By following the steps below, you can easily create a fully functional PWA that offers an mazing user experience across all devices.

Step 1 - Plan your app

Before diving into development, you should consider the goals of your PWA, what features you want to include, priorities and user experience. You can create first design concepts and wireframes for the app to visualize the structure and layout.
In most scenarios, this is often referred to as a ‘discovery phase’. You get the opportunity to ideate and gather user and stakeholder feedback as well as considering the functionalities of your to be product.

Step 2 - Designing the User Interface

After getting everything right from planning, you can now proceed to designing the UI of your app. During this stage consider things like responsiveness, compatibility with different platforms etc.. Be sure to capture all details that are crucial to the user including their interaction and engagement during usage.

Step 3 - Developing the Front-End

Using the web technologies that is HTML, CSS, JavaScript and frameworks like Angular. React or Vue.js develop a visually appealing interface for the users. And always remember they key principle in development using this stack implement a mobile first approach while ensuring responsiveness for larger screens too.

Step 4 - Implementing Service Workers

As mentioned previously, service workers are a key component of PWAs. They are JavaScript files that run in the background, enabling offline functionality, push notifications, and caching. To make sure your PWA works to its fullest potential, you’ll need to register and implement a service worker. The way on how you can do this massively depends on which framework you are using.

Step 5 - Adding Push Notifications

Leverage the Push API and service workers to implement push notifications. Obtain the necessary user consent and use a push notification service to send notifications to users.

Step 6 - Optimizing Performance

Optimization is a very important step in development in general. This is how you provide a seamless experience to your users. by ensuring you reduce loading times. by leveraging techniques such as code splitting and caching we should be able to achieve a fast and efficient operation for our PWA.

Step 7 - Testing and Debugging

Test your PWA on different devices, browsers and network condition to be sure that it meets the objective. Also be sure to gather user feedback and make necessary improvements when necessary.

Resources to Get Started with PWA Development

If you want to learn and move with the trend, finding resources to help you might be a bit tedious, to help you get started here are some of the best resources listed for you:
Online Tutorials and Guides

• Google Developers - Progressive Web Apps
• MDN Web Docs - Progressive Web Apps
• freeCodeCamp - Frontend Technologies
• Learn PWA

Documentation and Reference Materials

• Service Workers API Documentation
• Progressive Web Apps (PWAs)

PWA Development Tools

• Workbox - Offline Caching and Service Worker Library
• PWA Builder - PWA Generation Platform

Conclusion

Keeping in mind that PWAs are new to the industry and haven't yet been fully utilized, they can be a great addition to add to your toolkit.

With the latest technologies and the right tools getting started with PWAs can ultimately increase sales and monetary gain for your product either as an individual or organization. With it's many features including they are fast, able to work offline, and also they perform like normal native apps. This offers your users a great experience and keeps them satisfied.

If you have read this far I really appreciate it.

Enjoy Coding ❤.

The way we interact with the web has changed dramatically, and it will keep changing.

In the past, most people used desktop computers to access the internet. But today, people are using a wide variety of devices, including laptops, tablets, and smartphones. This has resulted in a growing demand for responsive web design.

Responsive web design is a design approach that ensures that a website looks good and functions properly on all devices. This is done by using fluid layouts and media queries to adapt the website to different screen sizes.

There are many benefits to using responsive web design. First‌, it provides a better user experience for everyone. When a website is responsive, users can access it from any device without having to zoom in or scroll horizontally. This makes it easier to read content and navigate the website.

Gone are the days when you build a website that looks good on your laptop and don't consider other users' devices.

So you can say responsive web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform, and orientation.

In this tutorial, I will be explaining some of the most vital details that you should remember when building your responsive website

5 Principles to Apply When Building Responsive Websites

There are a number of principles you should consider when building your next website in order to make it responsive. And here are five of them that I think are particularly important.

I won't be going into a lot of detail on each of these. This is more of an overview to keep in the back of your mind when you're building.

Use Media Queries

One of the most fundemental ways to create a responsive website is by using media queries. Media queries help you to define different breakpoints for your website.

A breakpoint in a responsive design is the “point” at which a website's content and design will adapt in a certain way to provide the best possible user experience. These breakpoints help you specify different CSS properties to use based on the size of the user's screen.

Common examples of breakpoints include 480px, 768px, 1024px, and 1280px. But you cannot define breakpoints for all the different screens. So developers work by defining two (mobile-desktop) to three (mobile-tablet-desktop) different breakpoints. Then along with other properties we will talk about below, you can define your various styles for each breakpoint.

Below is a typically example of how you can use a media query when building a website. I'm assuming you want to build a main layout and an aside layout.

The code should look something like this:

     .wrapper{
            width:100%;
            display:flex;
        }
        .main {
            width:80%;
            height:100px;
            background:blue;
            display:flex;
            justify-content: center;
            align-items: center;

        }
        .aside{
            height:100px;
            background:red;
            width:20%;
            display:flex;
            justify-content: center;
            align-items: center;
        }
    </style>
<body>
    <div class="wrapper">
       <main class="main">
        <h1>MAIN</h1>
    </main> 
    <aside class="aside">
       <h1>ASIDE</h1> 
    </aside>
    </div>


</body>

But you have to consider the fact that some users might try to view the website on a smartphone, which has a much smaller screen than your desktop system.

To make this look good even on devices with smaller screens, you can use media queries to either completely remove the aside bar or you can bring it below the main content area.

It depends on you and what you think your users might want to see or the type of information on the aside. This is just to help you think about the options – remember you are a problem solver and there is rarely one way to solve a problem. So pick what works best for you.

For the smaller screen, in this example we will be putting the aside bar below the main area with media query.

When building a website, there is a question you should ask before you start coding. Are you building for mobile first or desktop? This question is quite important as it will determine how you structure your CSS.

I personally like to go mobile first, simply because I know most people will view my website on smartphones, so I want to perfect that first. I realize that this debate has been going on for a while, but it depends on you and your site's needs.

Using media queries, we'd do this to change the layout of the code so that it looks good on both smart phones and desktop:

 <style>

    .wrapper > div {
        display:flex;
            justify-content: center;
            align-items: center;
    } 


        .main {
            width:100%;
            height:100px;
            background:blue;

        }
        .aside{
            height:100px;
            background:red;
            width:100%;
        }
        @media (min-width:600px) {
                   .wrapper{
            width:100%;
            display:flex;
                   }
                   .main {
            width:80%;

        }
        .aside{
            width:20%;
        }
        }
    </style>
<body>
    <div class="wrapper">
       <div class="main">
        <h1>MAIN</h1>
    </div> 
    <div class="aside">
       <h1>ASIDE</h1> 
    </div>
    </div>


</body>

There are a few things to take note of here (but again, this isn't meant to be an in-depth tutorial on media queries so we won't go into too much detail).

When working with media queries, you can define the min-width or max-width.

The code written inside the container of min-width are those we want to apply for that width and above – in this case, for the wrapper, you applied the display flex only when the width of the user screen is 600px or above . Other styles like the main width and the aside width also have their indivdual size adjusted when the screen get to a size of 600px and above. That is, the styles you have defined outside this media query will keep working until it sees a screen of 600px and above.

At 600px, it overrides these styles, which it does in the media query block, and then makes the necessary changes.

You can learn more about media queries and practice your skills by building projects in this tutorial.

Use Flexible Layouts

The layout is one of the most fundemental part of a website. This is the structure of your website, and you can lay things out in different ways, depending on what you need.

Since this is one of the most crucial part of your website, you want to create your layout in a way that it is not clogged up and doesn't look disorderly for the main screen sizes like mobile, tablet, and desktop.

By using CSS properties like Flexbox, Grid, and so on, you can easily achieve this.

CSS Grid: CSS Grid is a two-dimensional layout system for creating responsive web designs.

It allows you to define rows and columns in a grid, and then place and align content within those grid cells.

Grid is typically used for more complex layouts, such as those with multiple rows and columns. It gives you fine-grained control over how content is placed and spaced within the grid cells, and can even be used for overlapping content.

With the grid layout, you can easily have your website rearranged when used with media queries.

Flexbox: CSS Flexbox is a one-dimensional layout system for creating flexible and responsive web designs.

It allows you to define a flexible container and then align and distribute items within that container along a single axis (either horizontally or vertically).

Flexbox is best used for simpler layouts where items need to be arranged along a single axis. It allows you to easily control the spacing and alignment of those items, and can be used for both horizontal and vertical layouts.

You can learn more about CSS Flexbox in this crash course. And here's a handbook to get you started with Grid.

Then, if you want to put your Flexbox and Grid skills into practice, check out this project-based guide.

Use Flexible Units

Another fundamental concept in web development is units. Depending on the kind of unit you use, it can make your website look orderly or disorderly.

There are different units you can use to define, for example, the size of a box or circle. And while there is a wide range of units to choose from (like rem, cm, px, inches, and more), they can be broadly classified into two types:

• Relative units: These are the units that change value based on the screen size. This kind of unit doesn't have a fixed dimension, but can easily expand or contrast based on the size of the device. Examples include percentage, rem (root element's font-size) or em.

• Absolute units: These are units whose values remain the same no matter the sreen size. Regardless of the size of the screen, the space occupied will always remain the same

Choosing units that automatically expand or resize based on screen size or the content it carries should be your go-to (except where absolutely necessary, and then you can go for absolute units).

A typical example is using a percentage value when you want a div (box) to always span the entire screen. Or you can use a px value when you want it to remain the same size regardless of the screen size.

Newer and easier units to use include rem and em. Let's look at an example of what not to do first:

  <style>
        .main {
            width:500px;
            height: 500px;
            background-color: red;
        }
    </style>
 <div class="main">
        <h1>MAIN</h1>
    </div>

The code above is a box with some text in it. Having a set up like this will look good on your large screen, but when you compare it with what you see on the smartphone, there will be a horizontal overflow. And as a web developer, you don't want this (except where absolutely necessary).

Creating something better might go like this:

<style>
        .main {
            width:50%;
           height:100px;
            background-color: red;
        }
    </style>
       <div class="main">
        <h1>MAIN</h1>
    </div>

As you can see from the code above, we defined the div with class main, with a relative width. That is, depending on your screen size, the box here will take 50% of your total screen size. This is really nice because now you don't have to worry about the user's screen size because no matter the size, the box will always be half of the screen.

The CSS Position Property

You can also use the various positioning properties in CSS to help you build responsive websites. Some examples include relative, absolute, static, sticky, and fixed.

The position property in CSS helps you easily move different elements from their normal flow, depending on the property you set.

These elements are then positioned using the top, bottom, left, and right properties. But these properties will not work unless the position property is set first. They also work differently depending on the position value.

• Static: The static position is the default position of any element on the browser, so the top, left, right and bottom properties won't work for it. This property can be used when you want to return an element back to its initial position after you have moved it with another positioning property.

<html>
 <style>
   .position{
     background:red;
     padding:5px;
     position:static;
     top:10px;
     left:20px;
   }
   .wrapper{
background:yellow;
     padding:5px;
   }
  </style>
  <body>
   <div class="main">
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
    <div class="wrapper">
    <div class="position">
      This is positioned static
    </div>
    </div>
  </body>
</html>

As you can see from above, we added the position static along with other properties and nothing happened. This is not because the code is not working – this is just the behaviour of position static. Adding or removing the position static does nothing to the code, that is where it should be.

• Relative: The relative position property positions an element relative to where the intial position of that element was. The following code will explain this better:

<html>
 <style>
   .position{
     background:red;
     padding:5px;
     position:relative;
     top:10px;
     left:20px;
   }
   .wrapper{
background:yellow;
     padding:5px;
   }
  </style>
  <body>
   <div class="main">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
    <div class="wrapper">
    <div class="position">
      This is positioned relative
    </div>
    </div>
  </body>
</html>

As you can see from the code above, a position of relative will simply move the element around its actual position based on the value you set. So it is relative to its actual position:

• Fixed: We use the fixed position to keep an element at a particular point on the screen, regardless of the content of the page. The fixed position will be relative to the size of the screen, that is when you set a top value, it will be calculated from the top of your screen. Here is an example. I will reduce the dummy content I am using.

<html>
 <style>
   .position{
     background:red;
     padding:5px;
     position:fixed;
     top:10px;
     left:20px;
   }
   .wrapper{
background:yellow;
     padding:5px;
   }
  </style>
  <body>
   <div class="main">
     This is a really long text
    </div>
    <div class="wrapper">

    <div class="position">
      This is positioned fixed
    </div>
    </div>
  </body>
</html>

This element with the position fixed completely left its original position. Then, based on the the value of the top and left, it was aligned some distance from the top of the screen. It the content is scrollable, the element will still remain there.

• Absolute: The absolute property positions an element relative to a parent element. So if it is inside another element that has a position property other than static, it will be positioned relative to that element. If there is no such element, it will be positioned relative to the top of the screen.

<html>
 <style>
   .position{
     background:red;
     padding:5px;
     position:absolute;
     top:7px;
     left:20px;
   }
   .wrapper{
background:yellow;
     position:fixed;
     top:30px;
     padding:30px;
   }
  </style>
  <body>
   <div class="main">
this is dummy content
</div>
    <div class="wrapper">
    <div class="position">
      This is positioned
    </div>
    </div>
  </body>
</html>

As you can see from the code and image above, the position is relative to that of the parent element – in this case, it's the fixed wrapper.

You can learn more about the CSS position property in this tutorial.

Make Images Responsive

Images are quite special, and that is why I am adding a section on them here too.

You can make images responsive by using the various methods listed above – but due to the nature of images, they are easily cropped or distorted if you're not careful.

Here are a couple things you can do when working with images if you want them to be responsive

Use SVG images: SVG stands for Scalable Vector Graphics. It's a type of image format that uses vector graphics to create scalable images that can be resized without losing quality.

Unlike raster images (for example, jpg, png, and so on) which are made up of individual pixels, SVG images are defined by mathematical equations and can be scaled up or down infinitely without losing clarity.

Some developers prefer to use SVGs rather than other types of images because:

• scalability – SVGs are infinitely scalable, which means that they can be used in a variety of different sizes and resolutions without losing quality.
• smaller file size – SVG images typically have a smaller file size than other types of images, such as JPEGs or PNGs.

Object-fit: The object-fit property is used to specify how the img should be resized to fit its container. This property tells the content to fill the container in a variety of ways, such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

Wrapping up

In this article, I hope I have helped you learn about the basic components you'll need when building responsive websites.

Responsive websites are necessary, and it's essential for every web developer to be able to comfortably build responsive web applications.

In this article, I have talked about 5 main building blocks of responsive sites, which are:

• Media queries
• Flexible layout
• Flexible units
• Positioning elements
• Images

Hopefully you can start using them in your own projects.

In this article, you will learn:

• What accessibility means
• Some myths surrounding accessibility
• How to make your work more accessible
• Some practical accessibility examples

Let's get started!

What is Accessibility?

There are so many definitions of accessibility on the web. But to me, accessibility in digital/web design simply means designing to make content usable for people with disabilities.

Working with accessibility in mind involves designing websites, applications, and digital interfaces that can be navigated by individuals with visual, hearing, motor, or cognitive impairments.

Some Myths Surrounding Accessibility

Like every topic under the sun, lots of people have different opinions about accessibility. Some might be true, some might be false.

Below, I'll share some popular misconceptions about accessibility.

Myth: people with disabilities don't use my platform

You might be designing for a governmental or corporate platform and think that people with disabilities will not use your platform.

This is an incorrect notion to have. There are different forms of disability, including temporary and permanent disabilities. You have no control over who might use your platform at any time or what they might need.

Myth: accessibility is only for people with disabilities

While accessibility measures are crucial for individuals with disabilities, they also benefit a wide range of people, including the elderly, those with temporary disabilities, individuals with situational limitations, and even people without apparent disabilities.

Accessibility best practices make websites and apps easier for everyone to use in various ways.

Myth: accessibility is all about adding ALT text

Alt (alternative) text is an assistive technology which is a valuable tool. But you shouldn't only use alt text as a substitute for general/wider accessibility best practiceds.

Assistive technologies work best when used in conjunction with accessible designs and content.

Myth: you should build accessible sites just so you don't get in trouble with the law

Although accessibility is a legal and ethical requirement, you shouldn't build it into your designs because of that reason alone.

You should build accessible websites and apps because accessibility helps anyone who comes to your platform interact with it well.

Why is Accessibility Important?

Accessibility is important for a number of reasons. They include:

• Improved Usability: Accessibility improves the usability of a website or application. Features like clear navigation, intuitive design, and so on benefit all users. They also contribute to user satisfaction, usability and overall engagement with products and services.
• Broad User Base: When your platform is accessible, it increases your user base, as people from different backgrounds and situations can use your platform. This expands the reach and customer base of your product.
• Enhanced User Experience: Incorporating accessibility in your designs will enhance the experience of your users (disabled or not), making it easier to interact with your platform.
• Equal Rights & Inclusion: Accessibility promotes inclusivity and prevents discrimination based on disabilities. Everyone deserves to have equal access to opportunities, information, and social services.
• Legal & Ethical Requirements: Legally and ethically, accessibility is a requirement for different domains and platforms. Adhering to these legal requirements ensures compliance and helps your client avoid potential legal issues.

How to Make Your Designs More Accessible

Understanding Accessibility Guidelines

Familiarize yourself with accessibility standards such as the Web Content Accessibility Guidelines(WCAG). These guidelines provide comprehensive recommendations for designing accessible digital content.

Use Sufficient Color Contrast

Opt for color combinations that are accessible for individuals with color blindness or low vision. Use tools to check the color contrast ratio and ensure that text is easily distinguishable from the background.

Here's an example of creating sufficient color contrast:

Color contrast example

In the example above, in the first sentence, the highlighted word (link) does not contrast well with the rest of the sentence. Compare with the second sentence where "link", is perfectly contrasting and has an underline, to create more emphasis.

It's more likely that the second sentence is accessible for individuals with color blindness or low vision.

Create Inclusive Forms

Design forms that are user-friendly. Include clear labels, instructions and, error messages. Make sure to enable users navigate and complete the form without relying solely on a mouse.

Here's an example of creating an inclusive form:

User-friendly form example

The first form has some issues:

• It does not have any header (to indicate what the form is for).
• It shows an error field without explaining what it indicates.
• The form does not specify the number of characters the password should have, all of which are very helpful to the user(s).

All these were corrected in the second form, where:

• A header was added indicating that the form is for "Course Registration".
• The error field specifically explains what's wrong – the user entered an invalid email address.
• The number of password characters as required by the platform was stated.

Implement Responsive Design

Some designers design for desktop versions only, not considering accessibility. But it's much more helpful to make your design responsive.

Ensuring that your designs are adaptable to different screen sizes and resolutions accommodates individuals who use various devices. This is a great way to make your designs more accessible.

Here's an example of implementing responsive design:

Responsive Design example

Above is an example of a product description page of a website. The first image on the left shows the desktop version only. In the second image, the design has been made more accessible – you can see the mobile responsive version as well.

Designing for different screen sizes shows that your design accommodates individuals who use various devices, as stated earlier.

Provide Feedback and Error Handling

Making sure your designs provide adequate feedback accompanied by the next step to take, gives a great user experience. Error notifications can completely discourage a user if not handled correctly. As such, adequate feedback is necessary to make your design accessible.

These are few ways of making your designs accessible, amongst others. You can make an accessibility checklist to help remind yourself of accessibility when designing. To help further, check out accessibilitychecklist.org to find out.

Here's an example of how to provide feedback and handle errors:

Error handling example

In the example above, the first 404 page tells the user what error occurred, and what might be the cause – but does not suggest a way of fixing the error. Meanwhile, the second 404 page explains the error that occurred and provides a way of fixing it – "Go to homepage".

Conclusion

Accessibility is important to customer retention and the growth of a business. As a UI/UX/Web designer, it's your responsibility to incorporate accessibility into your product and give your users an awesome experience. Remember, your user is the priority.

Navigation bars are essential components used a lot in websites and web apps. As a web developer, you will need to be able to customize them, either for a client project or a basic portfolio site.

In this guide, you'll learn how to build a navigation bar for yourself from scratch using just HTML, CSS, and JavaScript. You'll also learn how to make it accessible.

Here's a screenshot of what this navigation bar will look like:

Final result of navigation bar

This design is inspired by Tran Mau Tri Tam's Minimal Navigation bar on Dribbble.

Step 1 – Add the HTML Markup

For brevity's sake, we'll be using an icon library called boxicons to import certain icons for this navbar. I highly recommend using inline SVGs instead.

To make use of this library, insert the snippet below in the head of your HTML file:

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

The markup is divided into three main parts:

1. A div element with a class of nav-start
2. Another div element with a class of nav-end
3. A button element with an id of hamburger

All these elements will be enclosed within a header tag. To explain this better, copy the markup below and I'll explain what's happening after.

<header id="nav-menu">
  <div class="container">
    <div class="nav-start">
      <a class="logo" href="/">
        <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/logo.png?raw=true" 
             width="35" 
             height="35" 
             alt="Inc Logo"
          />
      </a>
      <nav class="menu"></nav>
    </div>

    <div class="nav-end">
      <div class="right-container">
        <form class="search" role="search">
          <input type="search" name="search" placeholder="Search" />
          <i class="bx bx-search" aria-hidden="true"></i>
        </form>

        <a href="#profile">
          <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/user.jpg?raw=true" 
               width="30" 
               height="30" 
               alt="user image" 
            />
        </a>
        <button class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</header>

For the nav-start, we have the following elements:

• An <img> element for the logo wrapped with an anchor <a> tag.
• A <nav> element with a class of menu which will contain all the navigation links. We'll define these links later using a combination of <ul>, li> and <a> tags.

The nav-end has the following elements:

• A <form> element with a role of search that contains a search input and search icon.
• A button element with a class of btn. We'll use this class to style the button.

Here's the resulting output:

Navigation menu

The navigation menu <nav> is where the navigation links will be. Replace the nav element you added earlier with this markup below:

<nav class="menu">
    <button id="hamburger" aria-expanded="false">
      <i class="bx bx-menu" aria-hidden="true"></i>
    </button>
    <div class="menu">
        <ul class="menu-bar">
            <li>
                <button 
                  class="nav-link dropdown-btn" 
                  data-dropdown="dropdown1" 
                  aria-expanded="false">
                    Browse
                  <i class="bx bx-chevron-down" aria-hidden="true"></i>
                </button>
                <div id="dropdown1" class="dropdown"></div>
            </li>
            <li>
                <button 
                  class="nav-link dropdown-btn" 
                  data-dropdown="dropdown2" 
                  aria-expanded="false">
                    Discover
                  <i class="bx bx-chevron-down" aria-hidden="true"></i>
                </button>
                <div id="dropdown2" class="dropdown"></div>
            </li>
            <li><a class="nav-link" href="/">Jobs</a></li>
            <li><a class="nav-link" href="/">Livestream</a></li>
            <li><a class="nav-link" href="/">About</a></li>
        </ul>
    </div>
</nav>

Here you have a nav tag that contains a button and an unordered list of five li elements representing each navigation menu item: browse, discover, jobs, livestream, and about.

The button serves as a hamburger menu, and is a button with an id and aria-expanded set to "false". The aria-expanded attribute will enable us make this button more accessible to screen readers.

The first two list elements, browse and discover, are button elements and will be used to toggle their individual dropdown menu. The remaining elements Jobs, livestream, and about, are just regular links.

With the code so far, your result should look like this:

Dropdown Element

Next up, let's define the dropdown element for each navigation button. Here's the markup for the first dropdown. Replace the first li element in your markup with this:

<!-- markup truncated for brevity-->
<li>
    <button
      class="nav-link dropdown-btn"
      data-dropdown="dropdown1"
      aria-expanded="false"
    >
      Browse
      <i class="bx bx-chevron-down" aria-hidden="true"></i>
    </button>
    <div id="dropdown1" class="dropdown">
      <ul>
        <li>
          <a class="dropdown-link" href="#best-of-the-day">
            <img src="./assets/icons/botd.svg" class="icon" alt=""/>
            <div>
              <span class="dropdown-link-title"
                >Best of the day</span
              >
              <p>Shorts featured today by curators</p>
            </div>
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#featured-streams">
            <img src="./assets/icons/fs.svg" class="icon" alt=""/>
            <div>
              <span class="dropdown-link-title"
                >Featured Streams</span
              >
              <p>Leading creatives livestreams</p>
            </div>
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#subscriptions">
            <img src="./assets/icons/sp.svg" class="icon" alt=""/>
            <div>
              <span class="dropdown-link-title">Subscriptions</span>
              <p>Gain exclusive access</p>
            </div>
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#creative-feed">
            <img src="./assets/icons/cf.svg" class="icon" alt=""/>
            <div>
              <span class="dropdown-link-title">Creative Feed</span>
              <p>See trending creations</p>
            </div>
          </a>
        </li>
      </ul>

      <ul>
        <span id="apps- class="dropdown-link-title">Browse by apps</span>
        <li>
          <a class="dropdown-link" href="#adobe-xd">
            <img src="./assets/icons/xd.svg" alt=""/>
            Adobe XD
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#after-effect">
            <img src="./assets/icons/ae.svg" alt=""/>
            After Effect
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#sketch">
            <img src="./assets/icons/sketch.svg" alt=""/>
            Sketch
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#indesign">
            <img src="./assets/icons/indesign.svg" alt=""/>
            Indesign
          </a>
        </li>
        <li>
          <a class="dropdown-link" href="#figma">
            <img src="./assets/icons/figma.svg" alt="" />
            Figma
          </a>
        </li>
      </ul>
    </div>
  </li>

You can get the SVG icons here.

To breakdown this markup, we added the following:

• A div element with an id of dropdown1 and class of dropdown.
• Two ul elements.
• A span element with a class of dropdown-link-title for the header of each menu collection.
• A collection of links defined using li and a tags. The links each have a class of dropdown-link.
• Inside each anchor tag, an icon is added via the img tag.

Note: Since the icons added via the img tag are strictly declarative, I highly suggest you add them as SVG elements directly. I am only doing this to make the code more readable.

Here's the markup for the second dropdown element dropdown2:

<!-- markup truncated for brevity-->
<li>
    <button
      class="nav-link dropdown-btn"
      data-dropdown="dropdown2"
      aria-expanded="false"
    >
      Discover
      <i class="bx bx-chevron-down" aria-hidden="true"></i>
    </button>
    <div id="dropdown2" class="dropdown">
      <ul aria-labelledby="categories-title">
        <span id="categories-title" class="dropdown-link-title">Browse Categories</span>
        <li>
          <a class="dropdown-link" href="#branding">Branding</a>
        </li>
        <li>
          <a class="dropdown-link" href="#illustrations">Illustration</a>
        </li>
      </ul>
      <ul aria-labelledby="download-title">
        <span id="download-title" class="dropdown-link-title">Download App</span>
        <li>
          <a class="dropdown-link" href="#mac-windows">MacOS & Windows</a>
        </li>
        <li>
          <a class="dropdown-link" href="#linux">Linux</a>
        </li>
      </ul>
    </div>
  </li>

The final result should look like this:

The full markup will be provided at the end of this tutorial.

Step 2 – Style the Navigation Bar

As always, we'll start by resetting the default margin and padding of every element on the page, add global variables, and some basic styling to a few elements.

/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  --dark-grey: #333333;
  --medium-grey: #636363;
  --light-grey: #eeeeee;
  --ash: #f4f4f4;
  --primary-color: #2b72fb;
  --white: white;
  --border: 1px solid var(--light-grey);
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

body {
  font-family: inherit;
  background-color: var(--white);
  color: var(--dark-grey);
  letter-spacing: -0.4px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
}

Next, add some reusable styles.

.btn {
  display: block;
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 5px;
}

.icon {
  padding: 0.5rem;
  background-color: var(--light-grey);
  border-radius: 10px;
}

.logo {
  margin-right: 1.5rem;
}

#nav-menu {
  border-bottom: var(--border);
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  column-gap: 2rem;
  height: 90px;
  padding: 1.2rem 3rem;
}

Now that you've gotten this basic styling out of the way, you can focus on styling the core navigation bar itself.

Navigation menu styles

Here's the markup to style the navigation bar container:

.menu {
  position: relative;
  background: var(--white);
}

.menu-bar li:first-child .dropdown {
  flex-direction: initial;
  min-width: 480px;
}

.menu-bar li:first-child ul:nth-child(1) {
  border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
  border-bottom: var(--border);
}

.menu-bar .dropdown-link-title {
  font-weight: 600;
}

.menu-bar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.6px;
  padding: 0.3rem;
  min-width: 60px;
  margin: 0 0.6rem;
}

.menu-bar .nav-link:hover,
.dropdown-link:hover {
  color: var(--primary-color);
}

.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
  display: flex;
  align-items: center;
}

Dropdown Menu Styles

In addition to styling the dropdown menu, it will be hidden using a combination of visibility and opacity properties. The idea is to show the menu only when the individual button has been clicked.

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  top: 36px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateX(-5px);
  transition: 0.1s ease-in-out;
  box-shadow: var(--shadow);
}

.dropdown.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateX(5px);
}

.dropdown ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.2rem;
  font-size: 0.95rem;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
}

.dropdown-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-radius: 7px;
  transition: 0.1s ease-in-out;
}

.dropdown-link p {
  font-size: 0.8rem;
  color: var(--medium-grey);
}

Later on, the menu can be toggled by reverting the visibility and opacity properties back to the default state using the active class. But we'll do this via JavaScript.

If you prefer to hide the menu completely, substitute the opacity and visibility properties with display: none;. Although this property is not animatable using transition in CSS.

Right menu styles

Next, add the styling for the search input, button, and profile image and then hide the hamburger button on desktop screens.

.right-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.right-container .search {
  position: relative;
}

.right-container img {
  border-radius: 50%;
}

.search input {
  background-color: var(--ash);
  border: none;
  border-radius: 6px;
  padding: 0.7rem;
  padding-left: 2.4rem;
  font-size: 16px;
  width: 100%;
  border: var(--border);
}

.search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

#hamburger {
  display: none;
  padding: 0.1rem;
  margin-left: 1rem;
  font-size: 1.9rem;
}

Here's what it should look like:

To finish up the styling, add the media query styling:

@media (max-width: 1100px) {
  #hamburger {
    display: block;
    position: relative;
    left: calc(100vw - 9rem);
  }

  .container {
    padding: 1.2rem;
    margin-right: 3rem;
  }

  .menu {
    display: none;
    position: absolute;
    top: 87px;
    left: 0;
    min-height: 100vh;
    width: 100vw;
  }

  .menu-bar li:first-child ul:nth-child(1) {
    border-right: none;
    border-bottom: var(--border);
  }

  .dropdown {
    display: none;
    min-width: 100%;
    border: none !important;
    border-radius: 5px;
    position: static;
    top: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .menu.show,
  .dropdown.active {
    display: block;
  }

  .dropdown ul {
    padding-left: 0.3rem;
  }

  .menu-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 1rem;
    padding: 1rem;
  }

  .menu-bar .nav-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
  }

  .menu-bar > li:not(:last-child) {
    padding-bottom: 0.5rem;
    border-bottom: var(--border);
  }
}

@media (max-width: 600px) {
  .right-container {
    display: none;
  }
}

First, this arranges the elements, and most importantly, it targets the hamburger class and hides it. Now on tablet and mobile screens, the navigation bar is responsive and the hamburger button is visible.

This completes the navigation bar styling. Let's work on the functionality in the next section.

Step 3 – Add JavaScript Functionality

For the JavaScript functionality, we'll focus on the following categories:

• Toggling the dropdown menu visibility
• Closing the dropdown menu
• Toggling the hamburger menu visibility
• Toggling the aria-expanded attribute

First, select your classes using the DOM's querySelector method and store them in variables so they are reusable.

// script.js
const dropdownBtn = document.querySelectorAll(".dropdown-btn");
const dropdown = document.querySelectorAll(".dropdown");
const hamburgerBtn = document.getElementById("hamburger");
const navMenu = document.querySelector(".menu");
const links = document.querySelectorAll(".dropdown a");

Next add the functions below in your code. I'll explain their uses a bit later.

function setAriaExpandedFalse() {
  dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}

function closeDropdownMenu() {
  dropdown.forEach((drop) => {
    drop.classList.remove("active");
    drop.addEventListener("click", (e) => e.stopPropagation());
  });
}

function toggleHamburger() {
    navMenu.classList.toggle("show");
    hamburgerBtn.setAttribute(
        "aria-expanded",
        hamburgerBtn.getAttribute("aria-expanded") === "false" ? "true" : "false"
    );
}

Get dropdown menu ID

The next step is getting the dropdown menu ID. Since there are two dropdown menus, the value will be based on what dropdown button is clicked.

To get the ID, you'll utilize the dataset property and then store the value into its own variable.

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);
    console.log(dropdownElement);
  });
});

To break this snippet down:

• The forEach method loops through the collection of buttons
• The addEventListener() method attaches a click event to each button
• The currentTarget.dataset property fetches the current dropdown of the button clicked.
• Each of the ids are used to target the corresponding dropdown element

What this means is that when the button with a dataset of dropdown1 is clicked, the div element with an id of dropdown1 is logged to the console, and inversely for the dropdown2 button.

dynamically getting each dropdown element using the button dataset property

Toggle the dropdown menu

Toggling the menu is fairly easy now that you have the dropdown element ID stored into a variable called dropdownElement. By targeting this variable, you can toggle the active class on each dropdown element.

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);

    dropdownElement.classList.toggle("active");
    dropdown.forEach((drop) => {
      if (drop.id !== btn.dataset["dropdown"]) {
        drop.classList.remove("active");
      }
    });
    e.stopPropagation();
  });
});

In addition to toggling the dropdown menu, we added a condition to check if the current dropdown element id matches with the active button. This makes sure only one dropdown element is expanded at a time.

toggling the dropdown menu

Toggle aria-expanded property

The aria-expanded property allows assistive technologies to announce whether an interactive menu is expanded or collapsed. To toggle this property, insert this code inside the btn code block under e.stopPropagation():

btn.setAttribute(
    "aria-expanded",
    btn.getAttribute("aria-expanded") === "false" ? "true" : "false"
);

Now anytime the dropdown menu is visible, the aria-expanded property is set to true and when collapsed, it's set to false.

toggling the aria-expanded property

Collapse dropdown menu

So far the dropdown collapses only when the buttons are clicked. Other instances it should be collapsed include:

• When the links inside the dropdown menu are clicked
• When you hit the ESC key
• When you click on the document body – essentially, outside of the dropdown container.

By calling the functions created earlier, closeDropdownMenu and setAriaExpandedFalse, the dropdown menu can be collapsed and the aria-expanded attribute set to false.

// close dropdown menu when the dropdown links are clicked
links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
  })
);

// close dropdown menu when you click on the document body
document.documentElement.addEventListener("click", () => {
  closeDropdownMenu();
  setAriaExpandedFalse();
});

// close dropdown when the escape key is pressed
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeDropdownMenu();
    setAriaExpandedFalse();
  }
});

Here's the resulting output:

Toggle hamburger menu

To see the navigation bar on tablet and mobile screens, attach the toggleHamburger function as a callback on the hamburger button and then call the function inside the links code block.

links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
    toggleHamburger();
  })
);

hamburgerBtn.addEventListener("click", toggleHamburger);

This will essentially toggle a different class called show that controls showing the navigation bar or hiding it, and update the aria-expanded attribute accordingly.

Note that to truly make the hamburger menu accessible, you would need to make it automatically close when it loses focus (either by a change in keyboard focus or a mouse click).

Here's the final output:

Add More Dropdown Menus

You can add more dropdown menus by simply replacing any of the list items with a link to the one with a button and dropdown menu. In other for it to work, make sure you update the following:

• The dropdown ID according to how many menus you need. For example a third menu will have an id of dropdown3
• The button will have its data-dropdown value set to dropdown3

Here's an example that converts the Jobs link into a dropdown menu.

Before:

<li><a class="nav-link" href="/">Jobs</a></li>

After:

<li>
    <button
      class="nav-link dropdown-btn"
      data-dropdown="dropdown3"
      aria-expanded="false"
    >
      Jobs
      <i class="bx bx-chevron-down" aria-hidden="true"></i>
    </button>
    <div id="dropdown3" class="dropdown">
      <ul>
        <li><span class="dropdown-link-title">Software</span></li>
        <li>
          <a class="dropdown-link" href="#frontend">Frontend</a>
        </li>
        <li>
          <a class="dropdown-link" href="#backend">Backend</a>
        </li>
        <li>
          <a class="dropdown-link" href="#ai-ml">AI/ML</a>
        </li>
        <li>
          <a class="dropdown-link" href="#mobile-dev">Mobile Development</a>
        </li>
      </ul>
      <ul>
        <li>
          <span class="dropdown-link-title">Others</span>
        </li>
        <li>
          <a class="dropdown-link" href="#ui-ux">UI/UX</a>
        </li>
        <li>
          <a class="dropdown-link" href="#writing">Technical Writing</a>
        </li>
      </ul>
    </div>
  </li>

Here's the final result:

Final result after adding the third dropdown (Jobs)

Following this process, you can add as many dropdown menus as you want.

And with this, you’ve successfully built a responsive navigation bar with dropdown menus using just HTML, CSS, and JavaScript. You also learned how to make the menu accessible using a few aria attributes including the aria-expanded property.

Here’s the codepen file to test this navigation bar in action:

Get code files from GitHub using this link

Conclusion

I sincerely hope you found this post interesting or useful. If you did, kindly share with your friends or subscribe to my blog so you won't miss any future postings. Thanks for reading.

GitHub | Twitter | Blog | LinkedIn

But web development has evolved with the advent of JavaScript frameworks—particularly with the use of components as building blocks in developing User Interfaces.

In the component-driven world we are living in, we can see the benefits of container queries in Responsive Web Design. In fact, in some cases, we can achieve a fully-responsive webpage without using media queries.

In this article, we will explore responsive design beyond the viewport with Container Queries and analyze an example of a fully responsive site using just container queries.

So, What are Container Queries?

Container queries allow you to style HTML elements based on the size of their containers. It is similar in execution to media queries, except elements are styled based on the size of a viewport with media queries.

Image illustrating Container Queries in CSS

How to Use Container Queries

The containment context

To use container queries, you need to tell the browser which HTML element you wish to use as a container. We do this by declaring a “containment context”.

A containment context instructs the browser to start paying attention to the size of a container (or an element). This way, the browser knows when to apply the styles specified in your container query.

To declare a containment context, we use the container-type property with a value of size, inline-size, or normal. See the container-type API reference to understand what each of these values means.

Consider the following example of a soft drink card component below:

<div class="drink-card-container">
  <div class="drink-card">
    <img src="images/coke.png" alt="" />
    <div class="info">. . .</div>
   </div>
 </div>

We can then add a containment context to the container:

.drink-card-container {
  container-type: inline-size; 
}

And now, the browser pays attention to the size of .drink-card-container. Although, we still need to apply specific styles based on this container size, so we need the @container at-rule.

The @container at-rule

The @container at-rule allows you to style elements based on the size of their container. The container condition is evaluated when the container changes in size. Also, the @container at-rule is what primarily defines a container query. It takes this form:

@container <container-condition> {
  <stylesheet>
}

It has a similar syntax to the @media at-rule in media queries.

Recall our soft drink card example. We can now add a @container at-rule that modifies the flex-direction of our .drink-card when the container’s size is less than or equal to 450px.

@container (max-width: 450px) {
  .drink-card-container .drink-card {
    flex-direction: column;
  }
}

And that’s it! That’s all you need to know to start using container queries.

The container-name property

Now that you know how container queries work, let's think about it at scale—what happens when we have multiple containers or containment contexts to work with?

This introduces the need for specificity when writing container queries, which is why the container-name property exists.

Let’s reconsider the example from our soft drink card component.

<div class="drink-card-container">
  <div class="drink-card">
    . . .
    <div class="info">
          <h3>Coke</h3>
      <p>On May 8, 1886, the first glass of Coke was sold.</p>
      <h5>₦ 150 <sup>estimated RRP</sup></h5>
      <a href="<https://www.coca-cola.com/>">See Official Website</a>
        </div>
   </div>
 </div>

We can then add a containment context to the .info element by giving it a container-type property, as we did earlier. But this time, we include a container-name property to give the container a specific identity.

.info {
  container-type: inline-size;
  container-name: drink-info;
}

Our container query will then take this shape:

@container drink-info (max-width: 200px) {
  .info p {
    display: none;
  }
}

The code above tracks the size of the .info container (named drink-info) and hides the paragraph element when the container’s size is less than or equal to 200px.

Source Code for a Responsive Site Using Only Container Queries

To access the complete source code where all of the snippets in this article were extracted, you can visit this GitHub repository.

Live Preview

You can see a live preview of the GitHub code here. To see the responsiveness in action, resize the browser window. Alternatively, you can interact with the codepen below.

Browser Compatibility for Container Queries

Container queries are available on all the major browser engines and are stable in all modern browsers. This means you can use it today for personal and work projects.

I hope this article helped you learn the basics of container queries. Now, you’re won't be confined to just using media queries—container queries are also a valid way to make your websites responsive.

I hope you found this article helpful. If you did, feel free to connect with me on LinkedIn and check out favourfelix.com to see what else I'm writing and up to.

This tutorial discusses everything you need to know to use CSS Grid like a pro.

Table of Contents

1. What Is CSS Grid?

2. Grid Container vs. Grid Item: What's the Difference?

3. What Is a grid Value in CSS?

4. What Is an inline-grid Value in CSS?

5. Properties for Specifying a Grid's Layout

6. What Are the Grid Container's Properties?

7. What Is CSS Grid's grid-template-columns Property?

8. What Is CSS Grid's grid-template-rows Property?

9. What Is CSS Grid's justify-content Property?

10. What Is CSS Grid's justify-items Property?

11. What Is CSS Grid's align-content Property?

12. What Is CSS Grid's align-items Property?

13. What Are the Grid Item's Properties?

14. What Is CSS Grid's justify-self Property?

15. What Is CSS Grid's align-self Property?

16. What Is CSS Grid's grid-column-start Property?

17. What Is CSS Grid's grid-column-end Property?

18. What Is CSS Grid's grid-column Property?

19. What Is CSS Grid's grid-row-start Property?

20. What Is CSS Grid's grid-row-end Property?

21. What Is CSS Grid's grid-row Property?

22. What Is CSS Grid's grid-area Property?

23. What Is CSS Grid's grid-template-areas Property?

24. How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes

25. How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns

26. Overview

So, without any further ado, let's understand what CSS Grid is.

What is CSS Grid?

The CSS Grid Layout Module makes browsers display the selected HTML elements as grid box models.

Grid allows you to easily resize and reposition a grid container and its items two-dimensionally.

Note:

• "Two-dimensionally" means grid modules allow simultaneous laying out of box models in rows and columns.

• Use Flexbox if you only need to resize and reposition elements one-dimensionally.

Grid Container vs. Grid Item: What's the Difference?

A grid container is an HTML element whose display property's value is grid or inline-grid.

A grid item is any of the direct children of a grid container.

A grid container (the large yellow area in the image) is an HTML element whose display property's value is grid or inline-grid. Grid items (the smaller boxes within the yellow container) are the direct children of a grid container.

What Is a grid Value in CSS?

grid tells browsers to display the selected HTML element as a block-level grid box model.

In other words, setting an element's display property's value to grid turns the box model into a block-level grid layout module.

Here's an example:

section {
  display: grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid value to convert the HTML document's <section> elements from regular <section> nodes to block-level grid box models.

Note:

• The display: grid directive creates only a single-column grid container. Therefore, the grid items will display in the normal layout flow (one item below another).

• Converting a node to a grid box model makes the element's direct children become grid items.

• The display: grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss the inline-grid value.

What Is an inline-grid Value in CSS?

inline-grid tells browsers to display the selected HTML element as an inline-level grid box model.

In other words, setting an element's display property's value to inline-grid turns the box model into an inline-level grid layout module.

Here's an example:

section {
  display: inline-grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-grid value to convert the HTML document's <section> elements from regular <section> nodes to inline-level grid box models.

Note:

• Converting a node to a grid box model makes the element's direct children become grid items.

• The display: inline-grid directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying a Grid's Layout

On converting a regular HTML element to a grid (or inline-grid) box model, the grid layout module provides two categories of properties for positioning the grid box and its direct children:

• Grid container's properties

• Grid item's properties

What Are the Grid Container's Properties?

A grid container's properties specify how browsers should layout items within the grid box model.

Note: We define a grid container's property on the container, not its items.

The eight (8) types of grid container properties are:

• grid-template-columns

• grid-template-rows

• grid-auto-columns

• grid-auto-rows

• justify-content

• justify-items

• align-content

• align-items

Let's discuss the eight types now.

What Is CSS Grid's grid-template-columns Property?

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: How to create a two-column grid container

section {
  display: grid;
  grid-template-columns: 95px 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: How to create a three-column grid container

section {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

Note:

• You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.

• Explicit grid columns are the columns you explicitly define with the grid-template-columns property.

• Implicit grid columns are the columns browsers create automatically. We use the grid-auto-columns properties to specify track sizes for implicit columns.

Tip:

• Use the CSS repeat() function to specify grid-template-columns values with repeated patterns. We will discuss the repeat() function later in this tutorial.

• Use the CSS column-gap property to create gaps between grid columns.

What Is CSS Grid's grid-template-rows Property?

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to create a three-row grid container

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second row relative to the fraction of available space in the grid container.

Example 2: How to create a three-row and four-column grid container

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three columns of different heights in the selected <section> grid container.

Note:

• You can use the grid-auto-rows property to specify default row heights for all the grid container's rows. For instance, grid-auto-rows: 100px will set default heights of 100px for all rows. But a grid-template-rows declaration will override it.

• Explicit grid rows are the rows you explicitly define with the grid-template-rows property.

• Implicit grid rows are the rows browsers create automatically. We use the grid-auto-rows properties to specify track sizes for implicit rows.

Tip:

• Use the CSS repeat() function to specify grid-template-rows values with repeated patterns. We will discuss the repeat() function later in this tutorial.

• Use the CSS row-gap property to create gaps between grid rows.

What Is CSS Grid's justify-content Property?

justify-content specifies how browsers should position a grid container's columns along its row axis.

Note:

• A row axis is sometimes called an inline axis.

• The justify-content property works if the total column widths are less than the grid container's width. In other words, you need free space along the container's row axis to justify its columns left or right.

The justify-content property accepts the following values:

• start

• center

• end

• stretch

• space-between

• space-around

• space-evenly

Let's discuss these values.

What is justify-content: start in CSS Grid?

start positions the grid container's columns with its row-start edge.

justify-content's start value positions columns to the grid container's row-start edge

Here's an example:

section {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the <section>'s columns to the grid container's row-start edge.

What is justify-content: center in CSS Grid?

center positions the grid container's columns to the center of the grid's row axis.

justify-content's center value positions columns to the center of the grid container

Here's an example:

section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the <section>'s columns to the center of the grid container.

What is justify-content: end in CSS Grid?

end positions a grid container's columns with its row-end edge.

justify-content's end value positions columns to the grid container's row-end edge

Here's an example:

section {
  display: grid;
  justify-content: end;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the <section>'s columns to the grid container's row-end edge.

What is justify-content: space-between in CSS Grid?

space-between does the following:

• It positions a grid container's first column with its row-start edge.

• It positions the container's last column with the row-end edge.

• It creates even spacing between each pair of columns between the first and last columns.

justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column

Here's an example:

section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of columns between the first and last grid column.

What is justify-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's columns.

Therefore, the space before the first column and after the last one is half the width of the space between each pair of columns.

justify-content's space-around value assigns equal spacing to each side of the grid container's columns

Here's an example:

section {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's columns.

What is justify-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its columns.

justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns

Here's an example:

section {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its columns.

What Is CSS Grid's justify-items Property?

justify-items specifies the default justify-self value for all the grid items.

The justify-items property accepts the following values:

• stretch

• start

• center

• end

Let's discuss the four values.

What is justify-items: stretch in CSS Grid?

stretch is justify-items' default value. It stretches the grid container's items to fill their individual cells' row (inline) axis.

justify-items' stretch value stretches grid items to fill their individual cells' row axis

Here's an example:

section {
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' row axis.

What is justify-items: start in CSS Grid?

start positions a grid container's items with the row-start edge of their individual cells' row axis.

justify-items' start value positions grid items to their individual cells' row-start edge

Here's an example:

section {
  display: grid;
  justify-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the grid items to their individual cells' row-start edge.

What is justify-items: center in CSS Grid?

center positions a grid container's items to the center of their individual cells' row axis.

justify-items' center value positions grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the grid items to the center of their individual cells' row axis.

What is justify-items: end in CSS Grid?

end positions a grid container's items with the row-end edge of their individual cells' row axis.

justify-items' end value positions grid items to their individual cells' row-end edge

Here's an example:

section {
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the grid items to their individual cells' row-end edge.

What Is CSS Grid's align-content Property?

align-content specifies how browsers should align a grid container's rows along the container's column axis.

Note:

• A column axis is sometimes called a block axis.

• The align-content property works if the total row heights are less than the grid container's height. In other words, you need free space along the container's column axis to align its rows up or down.

The align-content property accepts the following values:

• start

• center

• end

• stretch

• space-between

• space-around

• space-evenly

Let's discuss these values.

What is align-content: start in CSS Grid?

start aligns a grid container's rows with the column-start edge of the grid's column axis.

align-content's start value aligns rows to the grid container's column-start edge

Here's an example:

section {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the start value to align the <section>'s rows to the grid container's column-start edge.

What is align-content: center in CSS Grid?

center aligns a grid container's rows to the center of the grid's column axis.

align-content's center value aligns rows to the center of the grid container

section {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

align-content's end value aligns rows to the grid container's column-end edge

Here's an example:

section {
  display: grid;
  align-content: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What is align-content: space-between in CSS Grid?

space-between does the following:

• It aligns a grid container's first row with its column-start edge.

• It aligns the container's last row with the column-end edge.

• It creates even spacing between each pair of rows between the first and last row.

align-content's space-between value creates even spacing between each pair of rows between the first and last grid row

Here's an example:

section {
  display: grid;
  align-content: space-between;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of rows between the first and last grid row.

What is align-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's rows.

Therefore, the space before the first row and after the last one is half the width of the space between each pair of rows.

align-content's space-around value assigns equal spacing to each side of the grid container's rows

Here's an example:

section {
  display: grid;
  align-content: space-around;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's rows.

What is align-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its rows.

align-content's space-evenly value assigns even spacing to both ends of the grid container and between its rows

Here's an example:

section {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its rows.

What Is CSS Grid's align-items Property?

align-items specifies the default align-self value for all the grid items.

The align-items property accepts the following values:

• stretch

• start

• center

• end

Let's discuss the four values below.

What is align-items: stretch in CSS Grid?

stretch is the default value for align-items. It stretches the grid container's items to fill their individual cells' column (block) axis.

align-items' stretch value stretches grid items to fill their individual cells' column axis

Here's an example:

section {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' column axis.

What is align-items: start in CSS Grid?

start aligns a grid container's items with the column-start edge of their individual cells' column axis.

align-items' start value aligns grid items to their individual cells' column-start edge

Here's an example:

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the start value to align the grid items to their individual cells' column-start edge.

What is align-items: center in CSS Grid?

center aligns a grid container's items to the center of their individual cells' column axis.

align-items' center value aligns grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the center value to align the grid items to the center of their individual cells' column axis.

What is align-items: end in CSS Grid?

end aligns a grid container's items with the column-end edge of their individual cells' column axis.

align-items' end value aligns grid items to their individual cells' column-end edge

Here's an example:

section {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Try it on StackBlitz

The snippet above used the end value to align the grid items to their individual cells' column-end edge.

So, now that we know the types of CSS grid container properties, we can discuss the grid item properties.

What Are the Grid Item's Properties?

A grid item's properties specify how browsers should layout a specified item within the grid box model.

Note: We define a grid item's property on the item, not its container.

The ten (10) types of grid item properties are:

• justify-self

• align-self

• grid-column-start

• grid-column-end

• grid-column

• grid-row-start

• grid-row-end

• grid-row

• grid-area

• grid-template-areas

Let's discuss the ten types now.

What Is CSS Grid's justify-self Property?

justify-self specifies how browsers should position the selected grid item along its cell's row (inline) axis.

The justify-self property accepts the following values:

• stretch

• start

• center

• end

Let's discuss the four values.

What is justify-self: stretch in CSS Grid?

stretch is justify-self's default value. It stretches the selected grid item to fill its cell's row (inline) axis.

justify-self's stretch value stretches the selected grid item to fill its cell's row axis

Here's an example:

.grid-item1 {
  justify-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's row axis.

What is justify-self: start in CSS Grid?

start positions the selected grid item with the row-start edge of its cell's row axis.

justify-self's start value positions the selected grid item to its cell's row-start edge

Here's an example:

.grid-item1 {
  justify-self: start;
}

Try it on StackBlitz

The snippet above used the start value to position grid-item1 to its cell's row-start edge.

What is justify-self: center in CSS Grid?

center positions the selected grid item to the center of its cell's row axis.

justify-self's center value positions the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  justify-self: center;
}

Try it on StackBlitz

The snippet above used the center value to position grid-item1 to its cell's center.

What is justify-self: end in CSS Grid?

end positions the selected grid item with the row-end edge of its cell's row axis.

justify-self's end value positions the selected grid item to its cell's row-end edge

Here's an example:

.grid-item1 {
  justify-self: end;
}

Try it on StackBlitz

The snippet above used the end value to position grid-item1 to its cell's row-end edge.

What Is CSS Grid's align-self Property?

align-self specifies how browsers should align the selected grid item along its cell's column (block) axis.

The align-self property accepts the following values:

• stretch

• start

• center

• end

Let's discuss the four values below.

What is align-self: stretch in CSS Grid?

stretch is align-self's default value. It stretches the selected grid item to fill its cell's column (block) axis.

align-self's stretch value stretches the selected grid item to fill its cell's column axis

Here's an example:

.grid-item1 {
  align-self: stretch;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's column axis.

What is align-self: start in CSS Grid?

start aligns the selected grid item with the column-start edge of its cell's column axis.

align-self's start value aligns the selected grid item to its cell's column-start edge

Here's an example:

.grid-item1 {
  align-self: start;
}

Try it on StackBlitz

The snippet above used the start value to align grid-item1 to its cell's column-start edge.

What is align-self: center in CSS Grid?

center aligns the selected grid item to the center of its cell's column axis.

align-self's center value aligns the selected grid item to its cell's center

Here's an example:

.grid-item1 {
  align-self: center;
}

Try it on StackBlitz

The snippet above used the center value to align grid-item1 to its cell's center.

What is align-self: end in CSS Grid?

end aligns the selected grid item with the column-end edge of its cell's column axis.

align-self's end value aligns the selected grid item to its cell's column-end edge

Here's an example:

.grid-item1 {
  align-self: end;
}

Try it on StackBlitz

The snippet above used the end value to align grid-item1 to its cell's column-end edge.

What Is CSS Grid's grid-column-start Property?

grid-column-start specifies where the selected grid item should start (or span) along the grid container's row (inline) axis.

The grid-column-start property accepts the following values:

• auto

• <column-line-number>

• span <number-of-columns>

Example 1: How to auto-start the selected grid item following the normal column flow

.grid-item1 {
  grid-column-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal column layout flow.

Example 2: How to start the selected grid item at column line 3

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

Try it on StackBlitz

The snippet above used the grid-column-start property to start grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column-end Property?

grid-column-end specifies where the selected grid item should end (or span) along the grid container's row (inline) axis.

The grid-column-end property accepts the following values:

• auto

• <column-line-number>

• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal column flow

.grid-item1 {
  grid-column-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal layout flow.

Example 2: How to end the selected grid item at column line 3

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

Try it on StackBlitz

The snippet above used the grid-column-end property to end grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column Property?

grid-column is a shorthand for the grid-column-start and grid-column-end properties.

In other words, instead of writing:

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

You can alternatively use the grid-column property to shorten your code like so:

.grid-item1 {
  grid-column: 1 / 3;
}

Here is grid-column's syntax:

grid-column: grid-column-start / grid-column-end;

What Is CSS Grid's grid-row-start Property?

grid-row-start specifies where the selected grid item should start (or span) along the grid container's column (block) axis.

The grid-row-start property accepts the following values:

• auto

• <row-line-number>

• span <number-of-rows>

Example 1: How to auto-start the selected grid item following the normal row flow

.grid-item1 {
  grid-row-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal row layout flow.

Example 2: How to start the selected grid item at row line 3

.grid-item1 {
  grid-row-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-row-start property to start grid-item1 at row line 3.

Example 3: How to span the selected grid item across two rows

.grid-item1 {
  grid-row-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two rows.

What Is CSS Grid's grid-row-end Property?

grid-row-end specifies where the selected grid item should end (or span) along the grid container's column (block) axis.

The grid-row-end property accepts the following values:

• auto

• <column-line-number>

• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal row flow

.grid-item1 {
  grid-row-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal row layout flow.

Example 2: How to end the selected grid item at row line 5

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

Try it on StackBlitz

The snippet above used the grid-row-end property to end grid-item1 at row line 5.

Example 3: How to span the selected grid item across three rows

.grid-item1 {
  grid-row-end: span 3;
}

Try it on StackBlitz

The snippet above used the span 3 value to span grid-item1 across three rows.

What Is CSS Grid's grid-row Property?

grid-row is a shorthand for the grid-row-start and grid-row-end properties.

In other words, instead of writing:

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

You can alternatively use the grid-row property to shorten your code like so:

.grid-item1 {
  grid-row: 1 / 5;
}

Here is grid-row's syntax:

grid-row: grid-row-start / grid-row-end;

What Is CSS Grid's grid-area Property?

You can use the grid-area property for the following purposes:

1. As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.

2. To specify a grid item's name.

Let's discuss the two purposes below.

How to use grid-area as a shorthand

Here is the syntax for using the grid-area property as a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties:

.your-grid-item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

Therefore, instead of writing:

.grid-item1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

Try it on StackBlitz

You can alternatively use the grid-area property to shorten your code like so:

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

Try it on StackBlitz

How to use grid-area to specify a grid item's name

Here is the syntax for using the grid-area property to specify a grid item's name:

.your-grid-item {
  grid-area: item-name;
}

Here's an example:

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
</section>

Using grid-area to define a named grid item allows your grid container's grid-template-areas property to use the name to set the item's size and location.

What Is CSS Grid's grid-template-areas Property?

grid-template-areas specifies the area where you want to place named grid items within a grid container.

Remember: We use the CSS [grid-area](#heading-how-to-use-grid-area-to-specify-a-grid-items-name) property to name grid items.

Example 1: How to place a named grid item across three columns

.grid-item1 {
  grid-area: firstDiv;
}

section {
  display: grid;
  grid-template-areas: "firstDiv firstDiv firstDiv . .";
  background-color: orange;
  margin: 50px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to place grid-item1 across the first three column areas.

Note the following:

• Quotation marks ("") define each grid row.

• A period symbol (.) defines an unnamed grid item.

• We used the whitespace character to separate grid columns.

Example 2: How to specify multiple named grid items' placements

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: article;
}

.grid-item3 {
  grid-area: footer;
}

.grid-item4 {
  grid-area: sidebar;
}

.grid-item5 {
  grid-area: ads1;
}

.grid-item6 {
  grid-area: ads2;
}

.grid-item7 {
  grid-area: ads3;
}

section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "header header header header header"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads2"
    "sidebar article article article ads3"
    "sidebar footer footer footer footer";
  background-color: orange;
  margin: 30px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to specify where browsers should place the grid items across the rows and columns of the grid container.

Important Stuff to Know about the grid-template-areas Property

Here are four essential facts to remember when using the grid-template-areas property:

1. grid-template-areas do not permit empty cells

The grid-template-areas property requires you to provide an item for all grid cells.

For instance, consider this snippet:

grid-template-areas:
  "header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the first row is incomplete.

In other words, the first row is the only one with two columns. However, grid-template-areas expect all the rows in a grid container to have the same number of columns.

2. You can use dots to specify empty cells

Suppose you wish to leave some cells empty. In that case, use a dot (.) or multiple unspaced dots (....).

Here's an example:

grid-template-areas:
  "header header . . ."
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Try it on StackBlitz

The snippet above used the three spaced dot (.) symbols to indicate three empty cells.

3. grid-template-areas do not permit placing an item in multiple locations

The grid-template-areas property cannot place items twice within a grid container.

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer header header header";

Above is an invalid grid-template-areas value because the header item occupies two grid areas.

4. grid-template-areas allows rectangular areas only

The grid-template-areas property cannot create non-rectangular areas (such as T-shaped or L-shaped).

For instance, consider this snippet:

grid-template-areas:
  "header header header header header"
  "sidebar ads1 ads1 ads1 ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the ads1 item creates a non-rectangular grid area.

So, now that we know the types of CSS grid item properties, we can discuss how to define minimum and maximum grid sizes.

How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes

minmax() is a CSS Grid function for defining minimum and maximum grid sizes.

Syntax of the CSS minmax() function

minmax() accepts two arguments. Here is the syntax:

minmax(minimum-size, maximum-size)

Note the following:

• The minimum-size argument specifies the smallest size for a specific length.

• The maximum-size argument specifies the largest size for a specific length.

• minmax()'s arguments can be any of the non-negative CSS lengths, or any one of the keywords auto, min-content, or max-content.

• Suppose the maximum-size argument is less than the minimum-size. In that case, browsers will ignore the maximum-size and treat the minmax() function as min().

• An fr unit is an _in_valid unit for the minimum-size argument.

How to use the CSS minmax() function

You can use the minmax() function as a value for the following CSS properties:

• grid-template-columns

• grid-template-rows

• grid-auto-columns

• grid-auto-rows

Examples of the CSS minmax() function

Below are examples of how the CSS minmax() function works.

How to define a 70px minimum and a 250px maximum row grid size

section {
  display: grid;
  grid-template-rows: 50px 100px minmax(70px, 250px);
  grid-template-columns: auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s third row's height to a minimum of 70px and a maximum of 250px.

How to define a 30% minimum and a 70% maximum column grid size

section {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr minmax(30%, 70%) 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used the CSS minmax() function to set the <section>'s second column's width to a minimum of 30% and a maximum of 70%.

Note: You can use the CSS repeat() function to specify grid-template-rows or grid-template-columns values with repeated patterns. Let's discuss the repeat() function now.

How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns

The repeat() CSS function allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

Note:

• A track refers to a grid container's column (or row).

• You can use repeat() as a value for the CSS grid-template-columns or grid-template-rows properties.

Syntax of the CSS repeat() function

repeat() accepts two arguments. Here is the syntax:

repeat(number-of-repetition, track-list-to-repeat)

Argument 1: number-of-repetition

The number-of-repetition argument specifies the number of times browsers should repeat the specified track list (the second argument).

The number-of-repetition argument can be any of the following values:

• Number 1 or its multiple

• auto-fill

• auto-fit

auto-fill vs. auto-fit: What's the difference?

The auto-fill and auto-fit values automatically create as many tracks as needed to fill a grid container without causing an overflow.

The difference between the two values is that auto-fit collapses empty tracks to zero-pixel (0px). But auto-fill displays both empty and filled tracks.

Note: Empty tracks are columns or rows with no grid item.

Argument 2: track-list-to-repeat

The track-list-to-repeat argument specifies the track pattern you wish to repeat across a grid container's horizontal or vertical axis.

In other words, track-list-to-repeat consists of one or more values specifying the sizes of tracks browsers should repeat within a grid container.

Note: Suppose your number-of-repetition is auto-fill or auto-fit. In that case, you can use only fixed sizes as the track-list-to-repeat argument.

Examples of the CSS repeat() function

Below are examples of how the CSS repeat() function works.

How to create a three-column grid container with 70px column-widths

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 70px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 70px 70px 70px;

How to create a four-column grid container with one 50px and three 90px column-widths

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 90px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 50px 90px 90px 90px;

How to create a five-column grid container with one 40px and two 60px 1fr column-widths

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create two 60px 1fr-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 40px 60px 1fr 60px 1fr;

Note: We used the fr (fraction) unit to scale the third and fifth columns relative to the fraction of available space in the grid container.

How to auto-fill the grid container with 70px-wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to automatically fill the grid container with 70px-wide columns.

How to auto-fill the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fill the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Note: 1fr means one fraction unit.

How to auto-fit the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fit the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Overview

In this article, we discussed all the CSS Grid tools you need to create basic and advanced website layouts in responsive ways that look great on all devices.

I hope you've found this article helpful.

Thanks for reading!

If you like this tutorial, you can get the guidebook version at Amazon. It is a handy quick reference guide to CSS Grid.

Responsive layouts also give the user a more consistent and unified look across all devices and platforms, while still making sure the user's experience is tailored to their device.

This helps create a more user-friendly experience and improves the overall usability of the website or application.

In this tutorial, I'll show you how to create a simple responsive layout in React Native. You can preview the demo here.

Requirements

To follow this tutorial, you'll need:

• A basic understanding of React Native

• Expo Snack – a browser-based development environment for React Native

How to Create a Responsive Layout

Go to Expo Snack and clear the content of App.js. Start by importing the React library and Text, View, and Stylesheet UI components:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

React Native is based on React, so we need to import the React library explicitly. The Text component is used to create text, View is a container element used for grouping other elements, and StyleSheet is used to define the components stylesheet.

Next, define an App function and return two custom components, <Header /> and <Footer />:

export default function App() {
  return (
    <View style={styles.container}>
      <Header />
      <Boxes />
    </View>
  );
}

Here we wrap <Header /> and <Footer /> inside a <View /> container. Both of them are custom components, and because they haven't been created yet, you'll get a ReferenceError. Ignore that for now.

Next, create the stylesheet for this component and define the styling for the container element:

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },  
});

This flex:1 value tells the component to fill all available space and to share the space evenly amongst its children.

Let's now create both the <Header> and <Boxes/> components.

How to Create the <Header /> Component

In the components folder, create a new file named Header.js. Then import both the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Create a <Header /> function and return a single <View /> with text saying "Header Component":

export default function Header() {
  return (
    <View style={styles.header}>
      <Text>Header Component</Text>
    </View>
  );
}

The <View /> is linked to a style property of header. Keep in mind that we want to make this header responsive on all screen sizes. Let's do that using CSS.

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: "15%",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'grey'    
  },
});

With this stylesheet, we're specifying that, no matter how big or small the screen, the header should span the whole width of the screen (100%) and take only 15% of the screen's height.

Now to the boxes.

How to Create the <Boxes /> Component

Below the header we want to place two boxes, one to the left and one to the right. We also want the boxes to take up a certain width and height based on the screen dimension of the target device.

Inside the components folder, create a new file named boxes.js. Start by importing the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Next, create a Boxes function and return the markup for the boxes:

export default function Boxes() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <View style={styles.inner}>
          <Text>Box 1</Text>
        </View>                      
      </View>
      <View style={styles.box}>
        <View style={styles.inner}>
          <Text>Box 2</Text>
        </View>                      
      </View>
    </View>
  );
}

Here we have two boxes placed inside the container. Inside both is a View element containing the text label for each box.

Next, define the styling for the component. We'll create three sets of styles, one for the box container, one for the inner wrapper and the last for the boxes themselves.

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "85%",
    alignItems: "center",
    flexDirection: 'row',
    flexWrap: 'wrap'    
  },
  box: {
    width: "50%",
    height: "50%",
    padding: 5
  },
  inner: {
    flex: 1,
    backgroundColor: "#D3D3D3",
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Recall that the header takes up 15% of the screen's height. Therefore, with the above CSS, we specify that the box container should take up the remaining 85%.

We align the boxes to the center and place them in a row arrangement. Each box takes up 50% of the total height and width, and we apply padding of 5 to space them a bit.

Now that we have both the responsive Header and Boxes ready, let's import them to App.js and see the results.

How to Import <Header /> and <Boxes />

Inside App.js, at the top of the file, import both <Header /> and <Boxes /> like so:

import Header from "./components/Header"
import Boxes from "./components/Boxes"

Once the app compiles, you should see your responsive layout on the right side of your window looking like this:

Final look of responsive layout

This arrangement will be consistent across all screen sizes because we used percentages to set the height and width instead of fixed width values.

Conclusion

I hope this tutorial helped you understand React Native positioning better. You should now be able to create responsive layouts in your React Native app using the techniques we covered in this post.

Grab my FREE freelance writing checklist here. Have a great week!

In this article, I have created a study guide for the freeCodeCamp curriculum's entire Learn Basic CSS by Building a Cafe Menu practice project. This study guide is filled with additional information, articles, and videos to help you understand the concepts better.

Feel free to reference this guide as you go through the certification. The first part of the project reviews HTML elements and then moves onto CSS.

Here is the complete list of topics covered. Click on any of the links below to learn more about the topic.

Table of Contents

• DOCTYPE and HTML elements - Step 1
• Head and Title elements - Step 2
• Meta charset attribute - Steps 3,17
• Body element - Step 4
• Heading elements - Steps 6,9,10, 47
• Paragraph element - Steps 7, 30, 31, 49, 65
• Header element - Step 7
• Main element - Step 5
• Section Elements - Steps 8, 9, 46
• Style element - Step 10
• text-align property in CSS - Steps 11, 12, 33, 35
• Grouping CSS selectors - Steps 13, 51
• Linking External Stylesheets - Step 16
• Viewport meta tag - Step 18
• background-color property - Steps 18, 19, 23, 68
• Div element - Step 20
• CSS width property - Steps 21, 24, 38, 39, 41, 45
• CSS comments - Steps 22, 77
• Margin property - Steps 25, 73, 75, 84, 85, 86, 91
• Class selectors - Steps 26, 27, 32, 34, 36, 42, 44, 50, 61, 76, 87
• background-image property - Step 28
• Article element - Steps 29, 31, 48, 52
• Block, inline and inline-block values - Steps 37, 89
• Padding - Steps 53 - 55, 72
• max-width property - Step 56
• font-family - Step 57 - 59
• font-style property - Step 60
• font-size property - Steps 62, 74, 78
• Footer elements - Step 63
• Anchor elements - Step 64
• hr element - Steps 66, 71
• Height property - Steps 67, 70
• border-color property - Step 69
• Color property - Steps 79, 83
• Pseudo-classes - Steps 80, 81, 82
• Image elements - Steps 88, 90
• Additional resources for HTML and CSS

DOCTYPE and HTML elements

The first line in your HTML code should be the DOCTYPE declaration. A DOCTYPE tells the browser what version of HTML the page is written in.

This is the DOCTYPE declaration for HTML 5:

<!DOCTYPE html>

If you forget to include this line of code in your file, then some of the HTML 5 tags like <article>, <footer>, and <header> may not be supported by the browser.

The html element is the root element where all other elements go inside of it.

<!DOCTYPE html>
<html lang="en">
  <!--All other elements go inside here-->
</html>

The lang attribute inside the opening <html> tag sets the language for the page. It is also good to include it for accessibility reasons, because screen readers will know how to properly pronounce the text.

<html lang="en">

Head and Title elements

The <head> tags contain information that is processed by machines. Inside the <head> tags, you will nest metadata which is data that describes the document to the machine.

<head>
  <!--important meta data goes inside here-->
  <!--title element also goes inside here-->
</head>

The <title> tag is the title for the web page. This text is shown in the browser's title bar.

    <title>HTML 5 Boilerplate</title>

This is an example of what a head would look like on a real web page. None of this information is displayed on the web page itself.

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>

For a detailed description of each meta tag listed, you can read through this article on an HTML5 Boilerplate.

Meta charset attribute

UTF-8 is the standard character encoding you should use in your web pages. This will usually be the first <meta> tag shown in the <head> element.

 <meta charset="UTF-8">

According to the World Wide Web Consortium,

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

Body element

The body element contains all of the content for the web page. This includes headings, paragraphs, images, links, and more.

<html>
  <head>
    <title>Let's learn about the body element</title>
  </head>
  <body>
    <!--web page content goes inside here-->
  </body>
</html>

Heading elements

HTML heading elements represent the main heading and subheadings of a web page.

The h1 element represents the most important heading and should only be used once per web page.

<h1>I represent the main heading of a web page</h1>

The h2 element represents the second most important heading on the page.

<h2>I am the second most important heading element</h2>

There are a total of six section heading elements:

<h1>I am the most important heading element</h1>
<h2>I am the second most important heading element</h2>
<h3>I am the third most important heading element</h3>
<h4>I am the fourth most important heading element</h4>
<h5>I am the fifth most important heading element</h5>
<h6>I am the least important heading element</h6>

This is what it looks like rendered to the page.

To learn more about heading elements, you can read through this DevDocs detailed heading elements explanation.

Paragraph element

Paragraph elements represent the paragraphs on a web page.

<p>I love learning with freeCodeCamp. They have thousands of free articles and videos to help me learn how to code.</p>

This is what it looks like rendered to the page:

To learn more about paragraph elements, you can read through this DevDocs p element detailed explanation.

Header element

The header element contains introductory content of the web page. This can include elements like a nav, h1 or website logo.

<header>
  <img src="link-for-logo" alt="description for fake logo goes here">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#bio">Bio</a></li>
      <li><a href="#projects">Projects</a></li>
    </ul>
  </nav>
</header>

Main element

The main element is used to group all of the main content of the web page.

<h1>What freeCodeCamp has to offer</h1>
<main>
  <p>The core freeCodeCamp curriculum teaches full stack JavaScript and Python. There are hundreds of lessons to go through to get you ready for an entry level developer job.</p>

  <p>freeCodeCamp has thousands of free articles on their news publication. They also have hundreds of videos on their YouTube channel.</p>
</main>

This is what the code looks like rendered to the page.

To learn more about the main element, you can read through this DevDocs detailed main element explanation.

Section elements

The section element is used to group sections of content in the HTML document.

Here is an example of the section element:

<h1>Let's learn about section elements</h1>
<section>
  <h2>Defintion</h2>
  <p>The section element is used to group sections of content in the HTML document.</p>
</section>

This is what the result looks like rendered to the page.

To learn more about section elements, you can read through this DevDocs section element detailed explanation.

Style element

The style element contains the styling for the web page. This is known as internal CSS.

The style element goes inside the head tags.

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    /*Styles will go inside here*/
  </style>
</head>

<body>
  <!--website content goes inside here-->
</body>

</html>

To learn more, you can read through this helpful DevDocs explanation on the style element.

text-align Property in CSS

When you are working with heading or paragraph tags, the default styling in HTML will position the text on the left hand side of the page.

In this example, we have an <h1> which is placed on the upper left hand side of the page.

<h1>Let's learn about centering text</h1>

If we wanted to horizontally center that text on the page, then we can use the text-align property.

h1 {
  text-align: center;
}

To learn more, you can read through this helpful article on centering text: Text Align in CSS – How to Align Text in Center with HTML.

Grouping CSS selectors

If you have multiple CSS selectors with the same styles, then you can group them together like this:

h1, h2, h3 {
    text-align: center;
}

Notice how the h1, h2 and h3 are separated by commas. Grouping multiple CSS selectors together cleans up your CSS and removes repetition.

You can read more about CSS combinators here.

Linking External Stylesheets

The link element is used in most cases to link an external stylesheet to the HTML document. Using external CSS is preferred in most cases to help keep your HTML and CSS in separate documents for readability.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

rel="stylesheet" defines the relationship between the HTML file and the external stylesheet.

To learn more, you can read this DevDocs example on link elements.

Viewport meta tag

This tag renders the width of the page to the width of the device's screen size. If you have a mobile device that is 600px wide, then the browser window will also be 600px wide.

The initial-scale controls the zoom level. The value of 1 for the initial-scale prevents the default zoom by browsers.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

background-color property

You can change the background color of an HTML element by using the CSS background-color property.

Let's say we have this HTML markup.

<h1>Let's learn about the background-color property</h1>
<p>We are learning about background colors</p>

I wanted to change the background color from the default of white to pink. We can target the body selector and use background-color: pink;

body {
  background-color: pink;
}

To learn more, you can read through this helpful article: CSS Background Color – How to Change the Background Color in HTML.

Div element

The div HTML element is used to group multiple HTML elements and represents a generic container. This element holds no semantic meaning and is mainly used for styling purposes.

<div>
  <h1>Let's learn about divs</h1>
  <p>div elements are generic containers to group elements</p>
</div>

To learn more, you can read through this helpful article: HTML Div – What is a Div Tag and How to Style it with CSS.

CSS width property

The width property will set the width for the HTML element.

In this example, I want to set the width of this div to 200px.

div {
  width: 200px;
}

To learn more, you can read through this helpful DevDocs explanation on the width property.

CSS comments

If you need to comment out code or leave messages for yourself or other developers, you can use comments.

Here is the basic syntax for a comment in CSS:

/* this is a comment in CSS */

Anything inside that comment tag will not be rendered to the web page.

In this example, we have some HTML markup.

<h1>CSS comments</h1>
<p class="red-text">This is some demo text</p>

For the CSS, I have changed the text color to red and increased the font size.

.red-text {
  font-size: 1.2rem;
  color: red;
}

Here is the current result:

If I comment out the red text color, then the text will go back to black.

.red-text {
  font-size: 1.2rem;
  /* color: red; */
}

Margin property

The margin property represents the space around the HTML element. There are four different margin properties:

• margin-left
• margin-right
• margin-top
• margin-bottom

In this first example, we have two div elements which represent blue and red boxes.

<div class="blue-box"></div>
<div class="red-box"></div>

.blue-box,
.red-box {
  width: 200px;
  height: 200px;
}

.blue-box {
  background-color: blue;
}

.red-box {
  background-color: red;
}

Here is what the result looks like rendered to the page:

If we want to created some space between the red and blue boxes we can use the margin property. I am going to add a margin-bottom: 20px; to the blue box to create space.

.blue-box {
  background-color: blue;
  margin-bottom: 20px;
}

This is what the result looks like:

We can also center both boxes, by setting the margin-left and margin-right properties to auto.

.blue-box,
.red-box {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

Here is the result:

In this next example, we have a green box, a blue box, and some text on the page. We can use the margin-left, margin-right, margin-top, and margin-bottom properties to create spaces between the text and boxes.

<h1 class="text">Margin shorthand property</h1>
<div class="green-box"></div>
<p class="text">Margins create space around HTML elements</p>
<div class="blue-box"></div>
<p class="text">CSS is fun</p>

.text {
  text-align: center;
}
.blue-box,
.green-box {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.blue-box {
  background-color: blue;
}

.green-box {
  background-color: green;
}

Here is the result:

For the blue and green boxes, we can clean up our code here and place all of these margin styles all in one line.

  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;

The margin shorthand property is used to set the margin for all sides of the element. If two values are present, then the first value represents the top & bottom margins while the second value represents the left & right margins.

  margin: 20px auto;

To learn more about the margin shorthand property, you can read through this helpful DevDocs explanation.

Class selectors

If you wanted a group of HTML elements to share the same styles, then you would use the class attribute.

Here is an example of how to apply a class to an HTML element.

<h1 class="title">Jessica Wilkins blog</h1>

Then in your CSS, you can target that class and add some styles to it.

Here is an example of turning that text red, using CSS. Note, that you need to precede that class name with a . which tells the computer that you want to use a class selector.

.title {
  color: red;
}

background-image property

The background-image property is used to set the background image for an HTML element.

In this example, we are going to apply a background image of lasagna to the body element.

body {
  background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg");
}

The reason why this image is repeating on the screen is because that is the default behavior for the background-image property. You could use background-repeat: no-repeat; to change that default behavior.

Article element

The article element is a semantic HTML element that is used for independent self contained content.

<article>
  <h2>Blog entry #3</h2>
  content goes here...
</article>

Block, inline and inline-block values

The display property is used to apply block or inline characteristics to an element. Block level elements take up the full horizontal space on the page while inline elements only take up the horizontal space for that element.

Inline elements will not work with width and height properties. The margin left and right values will work for inline elements but not the top and bottom values.

You can have multiple inline elements displayed in a row while you can have only one block level element per row. Here is an example for multiple inline elements in a row:

<a href="">this is link 1</a>
<a href="">this is link 2</a>
<a href="">this is link 3</a>

You can use the display:block; value on these anchor element to change their default behavior and set it to block characteristics.

a {
  display: block;
}

This next example is for multiple block level elements. Notice how each of these divs takes up the entire horizontal space on the page and they are not displayed next to each other.

<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>

This last value is called inline-block which will treat elements as inline but will also have characteristics of block level elements.

Here is an example of two paragraph elements that are block level elements by default.

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

I can set the width, margin, padding and background-color for these p elements.

p {
  background-color: #89cff0;
  width: 100px;
  margin: 20px;
  padding: 15px;
}

We can add display: inline-block; to place the paragraph elements next to each other.

p {
  background-color: #89cff0;
  width: 100px;
  margin: 20px;
  padding: 15px;
  display: inline-block;
}

Padding

In CSS, you can add padding to create space around the element's content.

In this example we have a paragraph element with a pink background that uses no padding.

<p>This is an example without padding</p>

p {
  background-color: pink;
  width: 100px;
}

Notice how the text is right up against the border of the p element. That is because we haven't added any padding.

If we want to create space around that text, then we can use padding. Let's add 10px of padding on all sides of the text.

p {
  background-color: pink;
  width: 100px;
  padding: 10px;
}

If we only wanted to add padding to the left and right sides, then we can use the padding-left and padding-right properties.

p {
  background-color: pink;
  width: 100px;
  padding-left: 10px;
  padding-right: 10px;
}

We can also modify it so there is only space around the top and bottom of the text.

p {
  background-color: pink;
  width: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
}

Similar to the margin property, you can use a shorthand notation to apply different types of padding to the top, left, right, and bottom sides.

In this example we are going to add 10px of padding to the top and bottom of the text and add 15px of padding to the left and right sides of the text.

Without the shorthand property the code would look like this:

p {
  background-color: pink;
  width: 100px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

But we can use the shorthand notation to achieve the same result. The first number in the padding property represents the top and bottom while the second number represents the left and right.

p {
  background-color: pink;
  width: 100px;
  padding: 10px 15px;
}

To learn more about the padding shorthand notation, you can read through this helpful DevDocs explanation.

max-width property

The max-width property is useful when you want to set a maximum width for an element.

In this example, we have a red container with a width set to 70% of the viewport width.

<div class="red-container"></div>

.red-container {
  width: 70%;
  height: 40px;
  background-color: red;
}

We can use the max-width property to set a maximum width of 1000px to this red container.

.red-container {
  width: 70%;
  max-width: 1000px;
  height: 40px;
  background-color: red;
}

Now, when the viewport is larger than 1000px, the width will no longer be set to 70% of the viewport. Instead, it will stay at the maximum width of 1000px.

font-family property

In design, a font-family represents a collection of fonts that share similar design characteristics. Here are some examples of some font families:

Times, Times New Roman, serif    
Comic Sans MS, Comic Sans, cursive

In CSS, you can use the font-family property to apply a set of fonts to given elements.

<h1>Let's learn about font families</h1>
<p>This is an example on how to use the font-family CSS property</p>

body {
  font-family: Comic Sans MS, Comic Sans, cursive;
}

The browser will select the first font in the list and display if it is available. If that font is not available, then it will move onto the next font in the list.

It is good practice to provide a fallback font in the event that the other fonts in the list are not available to the browser. In our example, cursive would considered the fallback if Comic Sans MS and Comic Sans were not available.

font-style property

The font-style property is used to set the text in a normal, italic, or oblique font style.

Here is an example of setting the text to an italic font-style.

<h1>This example is about the font-style property</h1>

h1 {
  font-style: italic;
}

It's important not to use the HTML i (Idiomatic Text) element for styling text in italics. When it comes to styling text, you should always use the font-style property.

font-size property

The font-size property is used to change the font sizes for HTML elements like headings and paragraphs. Here are some common values that you can use with the font-size property:

• xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
• smaller, larger
• px, em, rem
• percentages (for example, font-size: 60%;)