CSS Grid - freeCodeCamp.org

How to Create a Masonry Layout Using HTML and CSS

Fanny Nyayic — Tue, 18 Jun 2024 12:22:43 +0000

A masonry layout is a grid-based design where items are arranged in a way that minimizes vertical gaps between them.

an example of a masonry layout

Unlike traditional grids with fixed row heights, masonry layouts adjust the positioning of items dynamically based on their content height, creating a visually appealing and space-efficient arrangement.

Key Characteristics of Masonry Layouts

Items can have varying heights, which makes the layout look more organic and less uniform when compared to standard grids.
Items are positioned to fill vertical gaps, creating a tightly packed layout without large spaces between items.
Masonry layouts can adapt to different screen sizes, adjusting the number of columns and the positioning of items accordingly.
The layout is often used for galleries, portfolios, and other visual content where an aesthetically pleasing presentation is important.

Common Uses

Image Galleries: Displaying images of different sizes without cropping.
Blog Layouts: Arranging posts of varying lengths.
E-commerce Sites: Showcasing products with different dimensions.

How It Works

Masonry layouts are often implemented using CSS Grid or JavaScript libraries like Masonry.js. Here, we'll focus on the CSS Grid approach.

How to Create a Masonry Layout

Step 1: Set Up Your Project

Create a project folder: Create a folder for your project on your computer.
Create HTML and CSS files: Inside the project folder, create two files: index.html and styles.css.

Masonry/
├── index.html
└── styles.css

Step 2: Write the HTML

Use a text editor like Visual Studio Code, Sublime Text, or any other editor you prefer.
Add the basic structure of an HTML document by pressing Shift+!
Change the title from Document to "CSS Masonry Layout"
Below the title, link your styles.css file as shown below:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Masonry Layouttitle>
    /** Link styles.css **/
        <link rel="stylesheet" href="styles.css">
head>
<body>

body>
html>

After setting up your HTML structure, create the different divisions for your layout within the body area.

<div class="masonry">
    <div class="item item1">Item 1div>
    <div class="item item2">Item 2div>
    <div class="item item3">Item 3div>
    <div class="item item4">Item 4div>
    <div class="item item5">Item 5div>
    <div class="item item6">Item 6div>
    <div class="item item7">Item 7div>
    <div class="item item8">Item 8div>
    <div class="item item9">Item 9div>
    <div class="item item10">Item 10div>
div>

is the container for our masonry layout. We'll use CSS Grid to create the masonry effect inside this container.
Item 1 to Item 10 are the individual items (or boxes) inside our masonry layout. Each item has a class of item to style them uniformly and a specific class (for example: item1, item2, and so on) to apply unique styles—like different heights and colors—to each item.

Breakdown of the CSS classes:

item: This class is used to style all items uniformly. It sets the background color, padding, box-sizing, box shadow, border-radius, and transitions for the items.
item1 to item10: These classes are used to set specific styles for each item. For example, item1 might have a different height and background color than item2, and so on. These classes will be used in the CSS to apply specific styles.

Step 3: Style with CSS

Open styles.css in a text editor: Use the same text editor to open your CSS file.
Add some basic styles for the body and the masonry container.

 body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
        margin: 0;
    }
    .masonry {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px;
        gap: 20px;
    }

What this means:

body sets the font, background color, padding, and removes default margin.
.masonry uses CSS Grid to create a responsive layout with columns that are at least 200px wide and automatically fills the available space. The rows have a base height of 10px, and there's a 20px gap between items.

Add styles for the items inside the masonry layout.

 .item {
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        color: #fff;
    }
    .item:hover {
        transform: translateY(-10px);
    }

What the above means:

.item sets a white background, padding, box shadow for elevation, rounded corners, and a hover effect to lift the item slightly. display: flex centers the content.
.item:hover will add a transform effect when the item is hovered on.

Set specific dimensions and colors by defining specific styles for each item to give them different heights and background colors.

.item1 { grid-row: span 15; background-color: #ff6f61; }
.item2 { grid-row: span 20; background-color: #6b5b95; }
.item3 { grid-row: span 10; background-color: #88b04b; }
.item4 { grid-row: span 25; background-color: #d65076; }
.item5 { grid-row: span 30; background-color: #ffb347; }
.item6 { grid-row: span 15; background-color: #45b8ac; }
.item7 { grid-row: span 20; background-color: #e94b3c; }
.item8 { grid-row: span 10; background-color: #6c5b7b; }
.item9 { grid-row: span 25; background-color: #00a86b; }
.item10 { grid-row: span 30; background-color: #b565a7;}

Each item class (.item1, .item2, and so on) sets the number of rows it spans (grid-row: span X;) and assigns a unique background color.

Step 4: View Your Layout

Open index.html in a web browser to see the masonry layout.

You can add more items, change colors, or adjust sizes to fit your design needs. Below is the layout we created.

Putting it all together

The index.html file should look like this:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Masonry Layouttitle>
        <link rel="stylesheet" href="styles.css">
head>
<body>
    <div class="masonry">
        <div class="item item1">Item 1div>
        <div class="item item2">Item 2div>
        <div class="item item3">Item 3div>
        <div class="item item4">Item 4div>
        <div class="item item5">Item 5div>
        <div class="item item6">Item 6div>
        <div class="item item7">Item 7div>
        <div class="item item8">Item 8div>
        <div class="item item9">Item 9div>
        <div class="item item10">Item 10div>
    div>
body>
html>

The styles.css file will look like this:.

    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
        margin: 0;
    }
    .masonry {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px;
        gap: 20px;
    }

    .item {
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        color: #fff;
    }

    .item:hover {
        transform: translateY(-10px);
    }

    /* Specific dimensions and colors for each item */
    .item1 { grid-row: span 15; background-color: #ff6f61; }
    .item2 { grid-row: span 20; background-color: #6b5b95; }
    .item3 { grid-row: span 10; background-color: #88b04b; }
    .item4 { grid-row: span 25; background-color: #d65076; }
    .item5 { grid-row: span 30; background-color: #ffb347; }
    .item6 { grid-row: span 15; background-color: #45b8ac; }
    .item7 { grid-row: span 20; background-color: #e94b3c; }
    .item8 { grid-row: span 10; background-color: #6c5b7b; }
    .item9 { grid-row: span 25; background-color: #00a86b; }
    .item10 { grid-row: span 30; background-color: #b565a7; }

Summary

A masonry layout is an effective way to display content with varying heights in a grid-like structure without large vertical gaps, making it ideal for image galleries, blogs, and portfolios.

Using CSS Grid, you can create a responsive and visually appealing masonry layout with minimal code.

How to Use Bento Grids Design in Your Web Projects

David Jaja — Thu, 04 Apr 2024 10:06:39 +0000

I believe we may have all noticed the trend of meticulously organized web layouts reminiscent of Japanese bento boxes. These 'Bento Grids' have swiftly gained traction, offering a visually appealing and structurally cohesive way to present content online.

In this article, we'll delve into the origins, rise, and practical implementation of the bento grid trend, exploring how it intersects aesthetics with functionality in modern web design.

Prerequisites

Fundamentals of HTML and CSS (CSS Grid)
Basics of Web Design

The Philosophy Behind Bento Grids

The concept of bento grids traces back to the Japanese tradition of serving a variety of dishes in a single, segmented container known as a bento box. This method of presentation not only ensures a balanced meal but also pleases the eye with its organization and simplicity.

Bento Japanese Box

Translated into web design, bento grids offer a similar experience: diverse content segmented into distinct areas, making it both accessible and aesthetically balanced.

The bento grid philosophy hinges on compartmentalization and organization. It creates a predictable rhythm that users can follow, reducing cognitive load and enhancing the overall user experience. The design's symmetry and order offers a sense of calm and control, appealing to users' desire for simplicity and structure amidst the chaos of the internet.

The Rise of Bento Grids

While the use of grids in design is not new, the specific trend of bento grids began to gain traction as designers sought to create more organized and mobile-responsive layouts.

Powerhouses like Apple use this design pattern in promotional videos for their products as well.

Apple mac promotional infographic

The trend also saw a surge in popularity with the advent of CSS Grid Layout and the growing focus on minimalist design that doesn't sacrifice functionality for form.

Platforms that emphasize content, such as online magazines, educational sites, and portfolios, were among the early adopters of bento grids. Their adoption highlighted the grid's ability to present diverse content types in a harmonious layout, thereby improving navigation and readability.

Examining the Trend

Clean lines, geometric shapes, and a clear space division often characterize modern bento grids. They usually consist of:

The title of a feature
A short description of the feature
Some infographic or interactive content.

This trend has been propelled by its positive impact on user experience. A well-implemented bento grid guides users through the website with ease, allowing quick access to information without overwhelming them with choices.

Pros of Using Bento Grids

Enhanced Organization and Cohesion: Bento grids bring a high level of organization to web design, allowing for a cohesive presentation of varied content. This segmentation makes it easier for users to digest information in a structured manner.
Aesthetic Appeal: The symmetry and clean lines inherent in bento grids are visually appealing, providing a neat and professional look that can enhance the visual identity of a website.
Reduced Scroll Fatigue: By efficiently utilizing space within a single viewport, bento grids can display a significant amount of content, which can reduce the need for excessive scrolling.
Metaphorical Clarity: The bento box metaphor effectively communicates the concept of a complete and balanced experience, which can be particularly useful for showcasing product features or a portfolio of work.
Improved Navigation: The predictability and order of bento grids aid in straightforward navigation, as users can easily move from one compartmentalized section to another.
Compatibility with Responsive Design: Bento grids seamlessly integrate with responsive design principles, facilitating effortless adjustment of a website's layout to accommodate diverse screen sizes and devices.
Focus on Content: The grid layout emphasizes content without unnecessary distractions, which can be crucial for sites where content is important, such as online galleries or information-driven platforms.
Facilitates Comprehensive Product Capture: In the context of showcasing products, bento grids offer users the convenience of capturing all essential information at once. With content neatly organized within distinct compartments, users can easily screenshot or save a single view of the grid, ensuring they capture all relevant details without the need for multiple interactions or navigating through various pages.

Cons of Bento Grids

Potential Information Overload: While bento grids can reduce cognitive load through organization, there's a risk of cramming too much information into a single screen, potentially overwhelming users.
Limited Visual Hierarchy: The uniform structure of bento grids can sometimes lead to a lack of visual hierarchy, making it harder for users to determine the importance of certain content over others.
Considerations Regarding Hick's Law: A densely packed grid presents users with a multitude of options, potentially prolonging their decision-making process. This abundance of choices can result in the paradox of choice, where users experience indecision or slower navigation due to the overwhelming array of options available.
Design Rigidity: The structured nature of bento grids can sometimes restrict creative design elements and lead to a monotonous user experience if not implemented with variation and dynamic content.
SEO Challenges: Search engines may have difficulty parsing the relevance of content when it's distributed across numerous grid compartments, potentially impacting SEO if not structured properly.
Accessibility Concerns: The compartmentalized nature of bento grids might present accessibility challenges, particularly for users who rely on screen readers or keyboard navigation, if not designed with accessibility standards in mind.

Bento Grids in Practice

Creating bento grids typically involves CSS grid layout and flexbox, which offer robust solutions for creating complex layouts with ease. Bento grids are favored for their flexibility and responsiveness, allowing content to reflow seamlessly across different screen sizes.

For this article, here’s the design we’re going to create the interface below:

desktop design to recreate

To begin, create a couple of divs in your markup.

<body>
    <div class="grid">
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
    div>
  body>

Then utilize the grid property, grid-template-columns, and grid-template-rows to define the number of rows and columns you desire.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

The final ingredient to achieving a bento-style grid lies in the use of the grid-template-areas property which is used to name grid areas according to the position you want them to occupy on the page.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
}

Finally, assign those names to the exact element you want to take up that space.

.item {
  border: 2px solid #464545;
  border-radius: 5px;
}

.grid .item:nth-child(1) {
  grid-area: hero;
}
.grid .item:nth-child(2) {
  grid-area: aside2;
}

.grid .item:nth-child(3) {
  grid-area: aside3;
}
.grid .item:nth-child(4) {
  grid-area: aside4;
}

.grid .item:nth-child(5) {
  grid-area: aside5;
}

You should have this result:

Bento structure achieved

All that’s left is to fill the boxes with their appropriate content and assets. You can some assets/content in this repo.

Bento Grid with its content filled

Another usefulness of the grid-template-areas property is the ease by which you can achieve responsiveness with it. In our example, to make the page responsive, you pass in a new string pair on your preferred threshold.

On tablet screens:

@media screen and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hero   hero   hero   hero"
      "hero   hero   hero   hero"
      "aside2 aside2 aside2 aside3"
      "aside4 aside4 aside5 aside5";
  }
}

Tablet Screens

And on smaller screens:

@media screen and (max-width: 750px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "hero   hero   hero"
      "aside2 aside2 aside2"
      "aside3 aside3 aside3"
      "aside4 aside4 aside4"
      "aside5 aside5 aside5";
  }
}

Smaller screens

Common Rules of Bento Grids

Here are some good rules of thumb when building bento grids:

Group Related Content: One of the fundamental principles of bento grids is to group related content together within each segment. This enhances the user's ability to quickly locate and understand the information they're seeking. By organizing content logically, designers can improve user engagement and satisfaction.
Vary Box Sizes: Avoid using the same size for every box within the grid. Varying box sizes can create visual interest and hierarchy, drawing attention to key elements while maintaining overall balance. This variation can help guide users through the content and highlight important information effectively.
Establish Visual Hiererchy: Although varying box sizes contribute to visual hierarchy, establishing visual hierarchy encompasses a broader range of design elements. In addition to box sizes, designers should consider factors such as colour, typography, and placement to prioritize certain elements over others.
Prioritize Center Square: In traditional bento grids, the center square often holds a special significance and acts as a focal point. Designers can use this central square to showcase critical information or highlight key features, effectively punctuating the grid and drawing users' attention to its core elements.
Limit the Number of Boxes: To maintain clarity and avoid overwhelming users, it's recommended to use nine or fewer boxes within the bento grid. Limiting the number of boxes ensures that the layout remains manageable and facilitates easier navigation and comprehension for users.
Consider Swirl Pattern: While not a strict rule, considering a swirl pattern can add an extra layer of visual interest to the bento grid design. This involves arranging content in a curved or swirling pattern within the grid, creating a dynamic and engaging layout that encourages exploration.

Additional Information

I’d like to point out a couple of things in the article not highlighted.

First and foremost, the article was inspired by Tom Geoco’s video on bento grids.
BentoGrids is an excellent resource for finding design inspiration if you’re interested. If you’re interested in the full code, here’s the repo, GitHub, and the Live version. Demo.
The design inspiration for the grid we built was gotten from FrontEnd Mentor.

Conclusion

Bento grids stand out as a significant trend in the modern web design landscape, offering a blend of aesthetic appeal and functional clarity. They represent a design ethos that values order, beauty, and user-centricity.

As web technologies evolve, the principles underlying bento grids will continue to inform best practices, encouraging designers to create experiences that are not only visually compelling but also intuitively navigable.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

Twitter / X: @jajadavid8
LinkedIn: David Jaja
Email: Jajadavidjid@gmail.com

Flexbox vs Grid in CSS – Which Should You Use?

Mabel Obadoni — Fri, 16 Feb 2024 11:02:00 +0000

Have you ever had issues with replicating a particular user interface from a Figma design? Do you find it difficult displaying elements in different sections of your browser screen?

A major cause of rift between user interface (UI) designers and frontend developers is the issue of having an awesome UI design being difficult to translate into real life features.

Almost every frontend developer has faced similar fears at certain points during their coding journey. This article will help you understand how CSS displays work with regards to flexbox and grid layout.

Origin of CSS

The earliest websites were not only static, but were also text-based. During the early years of the World Wide Web, web pages were written in markup languages such as XHTML and the like.

This is what they looked like:

https://www.history.com/news/the-worlds-first-web-site

With advancements in various technologies, technology enthusiasts were interested in making websites look more pleasant by adding some design. This led to the development of Cascading Style Sheets, better known as CSS.

Although CSS has gone through several evolutions, it is responsible for the aesthetics of websites. Imagine a website or a software application with just text and no design.

Hey! This article is not about history, so let’s get straight to business.

As a software developer majoring in client side applications (often referred to as front-end development), you’d agree with me that CSS is that lovely fellow who looks simple yet sophisticated.

CSS can keep you awake at night while trying to find out why your page is not aligning as expected or the reason your page content is chopped off on certain screens and not responsive too.

One of the reasons why beginners in software development often abandon front-end to major in back-end is the “stress” that comes with writing CSS code, especially with vanilla CSS where you have to manually input virtually every style rule. This is because CSS requires some level of calculation mixed with attention to the most minimal detail.

A major aspect of CSS that often creates confusion is the CSS layout — writing the CSS rule for the page layout can be a bit confusing as a beginner.

In the sections that follow, we'll focus on:

The similarities between flex and grid displays.
When to use flex or grid.

Basic Structure of CSS

Before discussing the CSS display in detail, let’s take a brief look at the CSS structure.

For starters, the CSS structure is a box-model. This means that every webpage is treated like a box, similar to having a pizza in a pizza box.

The pizza box here represents the browser page while the pizza represents the content of your website or application, which can be text, graphics, or multimedia.

A box of pizza

CSS box model

CSS Layout (Flex and Grid)

Now that you know how CSS structures the content of every web or application page, a vital aspect of CSS which you should get a grasp of is the layout, which is the crux of this article.

In architecture, every building has its structure. The structure for a commercial building might differ from that of a residential building. Same goes for front-end development.

The purpose of the application goes a long way in the selecting a layout for the. For instance, an e-commerce website would opt for a grid layout for proper arrangement and display of their products.

The layout of every website or application determines how the content on the page will be arranged: either in stacks of rows and columns or just columns across various screen-sizes.

It is also worthy to note that you can use more than one display on a particular webpage. This means that you can display a particular div as a grid and another div as a flexbox. It all boils down to the content of each div and how you want them to appear.

There are two ways to design the layout of a web page’s content in CSS:

Flex
Grid

How to Use the Flex Layout in CSS

The flex layout uses a method of arranging the web content in rows (main axis) or columns (perpendicular axis). This implies that it is a one-dimensional layout. The main axis can move in reverse order, from right to left.

The flex direction can be set to:

Row
Row-reverse
Column
Column-reverse

Using flexbox does not split the screen or content into equal parts. It is worthy to note that, flexbox doesn’t consider splitting content into equal columns across the row or stacking columns in the same alignment. Rather, it expands or shrinks the content to contain the available screen space.

Below is a diagram of a flex display using rows:

A graphical representation of a display set to flex

How to Set Display to Flex

To create a flex layout:

Give the parent element a style rule of flex display
Give the children element some margin and padding for a better look
Specify the direction of the flex if there is a need to

html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Setting Display to Flextitle>
<style>
    .fl{
        display: flex;
        flex-wrap: wrap;
    }
    .ex {
        flex-direction:row;
        flex: 1 0 100px; 
        margin: 5px; 
        padding: 10px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
style>
head>
<body>

<div class="fl">
    <div class="ex">Content 1div>
    <div class="ex">Content 2div>
    <div class="ex">Content 3div>
    <div class="ex">Content 4div>
    <div class="ex">Content 5div>
div>

body>
html>

The code above styles the body by selecting the parent container and assigning it a layout of flex. Then the direction of the children element is set to row using the flex-direction rule.

How to Use the Grid Layout in CSS

The grid layout, on the other hand, divides a web-page into 12 equal columns. These columns can be further split into the desired rows and columns.

The entire screen (100%) divided into 12 gives about 3.33% per column. The screen can also be styled using the number of columns in multiples of 2. That is: 2,4,6,8,10 and 12 with each number specifying the number of columns or width the element is expected to occupy.

How to Set Display to Grid

Set the parent element's display to grid
Specify the dimension(i.e rows or columns) of the grid using the grid-template property
Give some spacing(margin,padding, row-gap, etc) to the child element so the grid can be more visible

html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setting Display to Gridtitle>
<style>
    .fl{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* This would display the children elements in  three equal columns with equal width */
        gap: 5px; /* To set a gap between  thegrid items */
    }
    .gr {
        padding: 20px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
style>
head>
<body>

<div class="gr">
    <div class="gr">Content 1div>
    <div class="gr">Content 2div>
    <div class="gr">Content 3div>
    <div class="gr">Content 4div>
    <div class="gr">Content 5div>
div>

body>
html>

Similarities between Flex and Grid

They are both responsive layouts: Irrespective of which layout you decide to use for your application, provided that you style the properties correctly, both layout types are responsive to different screen sizes.
Setting the parent element's layout first: In styling a flex or grid layout, the parent element is the one styled with the exact layout in question.

When to Use Flex

CSS flex is popular for its order ability (row-reverse, column-reverse), which enables the developer to reorder content without having to change the HTML content manually. There are several uses cases of the CSS flex, such as:

Building One-dimensional Layouts: For web-pages or sections with a single layout, it is best to use flex as it helps in proper arrangement of the content.
Alignment and Distribution of Content: Thanks to justify-content, align-self and other properties, alignment and distribution of content is made easy using flex.
Displaying Columns in Equal heights: Using the align-items property and setting it to a value of stretch, that is: align-items:stretch, CSS flex ensures that columns within a flexbox are of equal heights. This implies that if there is a higher column, other columns will be stretched to meet up with the highest column. You can use CSS flex to display your columns in equal height irrespective of the height of the content.

When to Use Grid

The grid layout is the most commonly used by frontend developers because it allows you to place elements on different sections of the browser page while maintaining proper alignment. You can use the grid layout when:

Building a Responsive Design: Often times, user interfaces are developed to be adaptable to whatever screen they're being displayed on. In such cases, the grid layout is your best bet because it gives room to flexibility and resizing of the element.
Control of whitespace: Unlike the flex display that leaves some white space at the extreme, the CSS grid controls white space by distributing elements equally along the row and also based on the allocated column space.
Consistency in Design Layout: The CSS grid offers a consistent pattern in the structure of a web page. This arrangement of elements makes future editing of the page easier.

Conclusion

One tip that comes very handy when styling a page is to choose which of the display modes to employ.

Once that is settled, the various sections of the page can follow suit bearing in mind what the entire body holds.

Although not an advice, recent practices have seen developers use grid more often than flexbox. Whichever the case, ensure not to mix up the code for the respective displays so you do not run into errors.

Happy Coding!

How to Center Text Vertically with CSS

Joe Attardi — Mon, 23 Oct 2023 19:44:32 +0000

If you have some text inside a div, and nothing else, the div's height will match the text height. Suppose, though, you have some text and an image. Your text will be aligned at the bottom of the div, which is usually not what you want.

In this article, you'll learn a couple of ways to vertically center your text inside such a div or other element.

How to Center Text using Line Height

This approach is limited, but can be useful if you have your element set to a fixed height using the height property.

The line-height property determines the height of the box that the browser renders text into. By default, this is set to a value slightly larger than 1 to provide comfortable spacing between lines of text.

If you set the element's height and line-height to the same value, the text will be vertically centered:

.my-element {
  height: 3rem;
  line-height: 3rem;
}

Vertically centered text using line-height

There is an important caveat to this approach, though. This only works if your text can fit on one line.

If the text does wrap, you'll see the first line vertically centered. Because you set the line-height to be the same as the element's height, the wrapped line of text now overflows the element.

Wrapped text overflowing the container

If this sounds too rigid, read on. Next, you'll see how you can use Flexbox to vertically center your text, along with any other content inside the element.

How to Center Text using Flexbox

A better, more general-purpose solution, is to use a Flexbox layout with align-items set to center.

An element using Flexbox (the flex container) lays out elements (flex items) either in a row or column. A Flexbox layout has two imaginary lines running through it. The first is the main axis, along which items will be placed. For a row flexbox, the main axis is the horizontal axis.

The cross axis runs perpendicular to the main axis. You can use the cross axis to define the vertical alignment of elements inside the flex container.

The main and cross axis in a horizontal Flexbox layout

Here's the CSS you'll need to apply a Flexbox layout and vertically center the text:

.my-element {
    /* Use a flexbox layout */
    display: flex;

    /* Make a horizontal flexbox (the default) */
    flex-direction: row;

    /* The important part: vertically center the items */
    align-items: center;
}

This creates a horizontal Flexbox layout (the flex-direction: row is not strictly required, as it's the default). The align-items property determines the alignment of items along the cross, or vertical, axis. There are a few different values you can use, but here you can use center to vertically center the text.

The text with align-items: center

This works nicely, and it even handles multiple lines of wrapped text. If you have other content inside the element, such as an image, everything will be aligned vertically.

The text is aligned vertically with other content

How to Center Text Using CSS Grid

You can also center your content vertically using CSS Grid.

For a single div containing the text to center, you can turn it into a grid layout with one row and one column.

.my-element {
    display: grid;
    align-items: center;
}

In a grid layout, the align-items property specifies the alignment of the content within the cell, along the column (vertical) axis. This vertically aligns your text within the div element.

Text vertically centered using a 1x1 grid layout

If the element containing your text is already part of a grid layout, you can either apply align-items: center to the entire grid, or if you just want to control the vertical alignment of that one grid cell, you can use align-self: center.

Conclusion

Now you know how to vertically center text. Next time you see a tweet about centering a div, you can reply with your newfound CSS knowledge!

CSS Grid Handbook – Complete Guide to Grid Containers and Grid Items

Oluwatobi Sofela — Thu, 16 Mar 2023 18:19:27 +0000

CSS Grid gives you the tools to create basic and advanced website layouts in responsive ways that look great on mobile, tablet, and desktop devices.

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

What Is CSS Grid?
Grid Container vs. Grid Item: What's the Difference?
What Is a grid Value in CSS?
What Is an inline-grid Value in CSS?
Properties for Specifying a Grid's Layout
What Are the Grid Container's Properties?
What Is CSS Grid's grid-template-columns Property?
What Is CSS Grid's grid-template-rows Property?
What Is CSS Grid's justify-content Property?
What Is CSS Grid's justify-items Property?
What Is CSS Grid's align-content Property?
What Is CSS Grid's align-items Property?
What Are the Grid Item's Properties?
What Is CSS Grid's justify-self Property?
What Is CSS Grid's align-self Property?
What Is CSS Grid's grid-column-start Property?
What Is CSS Grid's grid-column-end Property?
What Is CSS Grid's grid-column Property?
What Is CSS Grid's grid-row-start Property?
What Is CSS Grid's grid-row-end Property?
What Is CSS Grid's grid-row Property?
What Is CSS Grid's grid-area Property?
What Is CSS Grid's grid-template-areas Property?
How to Use the CSS minmax() function to Define Minimum and Maximum Grid Sizes
How to Use the CSS repeat() Function to Define Grid Tracks with Repeated Patterns
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

elements from regular

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

elements from regular

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

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

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

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

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

'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

'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

'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

'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

'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

'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
span

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
span

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
span

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
span

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:

As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.
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">1div>
  <div class="grid-item2">2div>
  <div class="grid-item3">3div>
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

'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

'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.

Web Layouts – How to Use CSS Grid and Flex to Create a Responsive Web Page

Ophy Boamah — Fri, 21 Oct 2022 23:12:52 +0000

Your web layout is to your website what a floor plan is to a building. Without them, you’re just building castles in the air.

The first thing to do when you have a website or application to build or design is to decide on the layout. This is important because it is within this layout that you specify how elements are arranged so that you can assess them in their intended manner and hierarchy.

Basically, the aim of every web layout is to reduce confusion, enhance usability and to ultimately give your users an enjoyable experience. Some of the main elements of a layout are navigation, menus and content.

In web and front-end development, having a layout in mind ahead of building can help you decide on what CSS layout module to use: Flexbox or Grid.

In this article, we’re going to learn what each of these tools are and the best way to use them by building a simple yet beautiful landing page.

What We're Going To Build

landing page design

Check it out on Codepen here.

Project Functionality

Web Layout: Create a beautiful landing page
Mobile Responsiveness

Prerequisites

Basic knowledge of HTML and CSS.
An IDE (text editor) like VS Code
A web browser

Setup

Create a folder for your project and open in an IDE.
Within your project folder, create index.html and style.css files.
Create an asset folder to store images.
Within your index.html file, create your HTML boilerplate and link your CSS file and font URL within the tag.

Resources

Font: https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap
Desktop Image: https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png
Mobile Image: https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png
Client Logo (Databiz): https://i.postimg.cc/gJ9Y84m6/client-databiz.png
Client Logo (Audiophile): https://i.postimg.cc/15DDqYSD/client-audiophile.png
Client Logo (Meet): https://i.postimg.cc/5ybQqfbv/client-meet.png
Client Logo (Maker): https://i.postimg.cc/g2NsxByN/client-maker.png

How to Use Flexbox

Generally, HTML elements align according to their default display style. This means, without external styling with CSS, block elements like p and div will start on a new line. Inline elements like input and span, on the other hand, are arranged next to each other on the same line.

However, the concept of Flexbox allows you to easily place these elements either horizontally or vertically in what’s often referred to as one dimension. In order to achieve this, at least two elements are required: flex container and flex item. These refer to a parent and child element, respectively.

In responsive design, the purpose of Flexbox is to allow containers and their child elements to fill defined spaces or shrink depending on a device’s dimensions.

Flex-direction and Axes

Flex-direction is an important property of CSS Flexbox, because it is what determines the direction that flex items are arranged in. It does this by pointing out the main axis of a flex container.

There are two main axes, namely main axis and cross axis. The main axis is the defined direction of how your flex items are placed in the flex container, whilst the cross axis is always the axis at the opposite side of the main axis.

It can be dangerous to try using the concept of x and y axis from math to understand this. This is mainly because in Flexbox the main axis can be vertical or horizontal, always depending on the value of the flex-direction.

The values accepted by the flex-direction property include row (which is default), row-reverse, column, and column-reverse. For the purposes of this project, we’re going to look at row and column.

flex-direction: row

When the flex-direction attribute has a value of row, the main axis is horizontal and the cross axis is vertical, as shown in the image above. This means flex items will be arranged horizontally.

Since the row is the default value, if you display a container as flex but don't specify the flex-direction, the flex items will automatically be in a row.

flex-direction: column

When the flex-direction attribute has a value of column, the main axis is vertical and the cross axis is horizontal, as shown in the image above. This means flex items will be arranged vertically.

Now that we know how Flexbox works, let’s start building our navbar. We'll first provide the content within it, that is the menu items and logo. We’ll give them descriptive classes so that we can easily reference them within our CSS file.

<nav>
      <h2 class="logo">snaph2>
      <ul class="menu-items">
        <li>Featuresli>
        <li>Companyli>
        <li>Careersli>
        <li>Aboutli>
      ul>
      <ul class="cta-btns">
        <li>Loginli>
        <li>Registerli>
      ul>
nav>

The image below is the output for the code above. Because both

are block elements, each of the items we specified within them will be displayed on a new line.

Navbar content output

Flexbox layout display is declared on parent containers and affects child elements. This means that if you had a list of groceries in an unordered list, display flex can’t be applied on the

s which are child elements in this case. Instead, to display them as flex, you’d first have to create a parent container and apply it to that.

In our CSS code below, we're defining the font style and size for our project as well as our navbar logo. We're also displaying our nav elements and some of the elements within those as flex.

* {
  font-family: "Epilogue", sans-serif;
  font-size: 0.85rem;
}

.logo {
  font-size: 1.3rem;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
}

The image below is the output for the code above. The elements have been displayed as flex. Yet because we didn't specify the flex-direction, they're automatically arranged in a row.

But as you can see below using the ruler (red line), the flex items are not aligned as they should be. Let's fix that by learning another important flex element.

Flex without alignment

How to use the `align-items` attribute

This is a Flexbox attribute that controls the arrangement of flex items on the cross axis. The values it takes are flex-start, flex-end and center depending on the element's alignment needs. The image below shows how each of them works.

Image credit: freeCodeCamp

From the image above, we can see that if we want to ensure that the flex items within our

are aligned properly, on that element we must give the align-items attribute a value of center. So we have to add an attribute of align-items and a value of center to our flex container as shown in the CSS code below:

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

As you can see in the image below, the flex items are now aligned as they should be.

Flex with center alignment

But once again there is something missing. We want to have our items spread out properly on the navbar: the logo on the extreme left, login and register at the extreme right, and the rest in the middle.

We can achieve this with the justify-content attribute. Let's learn about it next and then implement it.

How to use the `justify-content` attribute

This is a Flexbox attribute that controls the arrangement of flex items on the main axis. It also defines how browsers distribute space between and around flex items within a flex container.

To achieve responsiveness, it helps with allocating any excess space that is leftover after flex-items have been arranged.

justify-content styles

From the styles associated with the various values of the justify-content attribute, we can see that the bottom two are more similar to what we're trying to achieve.

We can either go for the space around or the space-between and provide some padding on the sides to push the items on the extreme ends from the edges. We also give the list-syle attribute a value of none to remove the dots in front of the list items.

li {
  list-style: none;
}

nav {
  justify-content: space-between;
}

justify-content navbar output

Now that we have the items placed at their desired positions, we need to create slight spaces between them. In this case, we're going to give each list item a margin-right of 1rem. We also set other styles like size of fonts, color and a border for the register item.

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

Navbar with styles

After implementing the above code, this is the final look of our navbar. And this marks the end of our Flexbox section. Next, we'll build the final part of our landing page with CSS Grid.

How to Use CSS Grid

CSS Grid is a life-changing tool for creating web layouts. It helps you make both simple and complex layouts. The main difference is that while Flexbox helps with one dimensional arrangement of elements, CSS grid is able to do two dimensional arrangements.

The concept of axes we learnt about under Flexbox still applies here. You can use CSS Grid to arrange elements on the main axis and cross axis at the same time.

In summary, Flexbox, allows you to either arrange elements horizontally (in a row) or vertically (in a column). But with CSS Grid you can align elements both vertically and horizontally.

The CSS Grid layout is declared only on parent elements or containers. In effect, all its children become grid items. Once you have the target container, you give it an attribute of display and value of grid. The size of a grid’s row and column can be determined with grid-template-rows and grid-template-columns, respectively.

How to Build the Homepage

Just like we did with the navbar, let's start by defining our content within a

section in our HTML file.

Looking at our target image, we have two main sections: the left section will have text and logos whilst the right section has a hero image. That’s for the web view of our project.

Let's start by defining our content. The section with class text-side contains: heading, paragraph text, button and logo. The section with class img-side only contains an image.

<main>
      <section id="text-side">
        <h1>Make <br />remote workh1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        p>
        <button>Learn morebutton>
        <div class="clients-logos">
          <img src="./assets/images/client-databiz.svg" />
          <img src="./assets/images/client-audiophile.svg" />
          <img src="./assets/images/client-meet.svg" />
          <img src="./assets/images/client-maker.svg" />
        div>
      section>
      <section class="img-side">
        <img src="./assets/images/image-hero-desktop.png" />
      section>
    main>

Within the main section, we created the two sections we needed and gave them descriptive id's: text-side and img-side.

Within the text-side, we added a heading, paragraph text, button and a div to display clients' logos. The only thing we need for the img-side is the display image.

/* Client Logos */
.clients-logos img {
  width: 5rem;
  margin-right: 1rem;
}

.clients-logos {
  margin-top: 4rem;
}

.clients-logos img:nth-child(2) {
  width: 3rem;
}

/* Main */
main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
.img-side img {
  width: 20rem;
}

Within our CSS file, we need to style the client logos div as well as the child elements. We also set a font-size for the heading and paragraph. Next, we style our button and assign a width to our image.

pre-grid homepage display

The image above shows how our web page will look after defining the content and styling just the heading, button and logos – that is, we haven't declared our container as a grid yet. Because almost all the elements we have here are block elements, we see them align on top of one another.

Grid Template Rows and Columns

The grid-template-columns property specifies the number and widths of columns in a grid, defining a grid container's column by specifying the size of its tracks and line names.

The grid-template-rows property is the direct opposite. It specifies the number and heights of rows in a grid, also defining a grid container's row by specifying the size of its tracks and line names.

As you can see in the image below, grid-template-rows arranges elements from the top to bottom of the device screen. grid-template-columns arranges elements from the left to right side of the device screen.

For our project, we're going to make use of grid-template-columns since we want to arrange our two sections side by side, letting each section occupy an equal part of the overall project width. We do this by assigning it as an attribute on the same container that we specified a display of grid on.

display: grid

Now that the two sections inside our

tag have been placed equally using the grid-template-columns, we have two last things to do.

We need to align them horizontally, by positioning both elements in the center of the page, with the extra space on the left of the image, evenly distributed on both sides. We also need to align them vertically by positioning both of them in the center of the page, with the extra space on the bottom, evenly distributed above and beneath.

Align and Justify in CSS Grid

Good news – we don't have to learn any new concepts to achieve our desired alignments in CSS Grid Layouts. Because fortunately, align-items and justify-content, as we learnt earlier, are not exclusive to Flebox. You can also use them to position items both horizontally and vertically.

main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}

As you can see in the code above, we only had to give the value of center to both align-items and justify-content attributes on the parent tag (grid container).

To ensure that we see the effect of position in the perfect center, we also had to specify a height for the section. The image below is the final output of our project.

Landing page final look

How to Make it Responsive

So far, everything we've built is for the web. But for the sake of users who want to access the landing page on mobile, we have to make our project accessible on smaller screens. In our case, we're looking at screens that are greater than 300px but less than 480px.

As you can see in the code below, we're hiding our nav items and displaying an emoji with class of mobile-nav. Beside that, we're hiding the desktop header image and showing the mobile header image.

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .desktop-logos {
    display: none;
  }

  .mobile-logos {
    display: block;
  }

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 8rem auto 0 auto;
    text-align: center;
  }
}

Full Project Code

This is the project we’ve built together in this article:

Here's the full HTML code:

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Web Layout | Landing Pagetitle>

    
  head>
  <body>
    <nav>
      <div class="logos-section">
        <h2 class="logo">snaph2>
        <ul class="menu-items">
          <li>
            Features<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            svg>
          li>
          <li>
            Company<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            svg>
          li>
          <li>Careersli>
          <li>Aboutli>
        ul>
      div>
      <ul class="cta-btns">
        <li>Loginli>
        <li>Registerli>
      ul>
      <p class="mobile-nav">🌚p>
    nav>
    <main>
      <section id="text-side">
        <h1>Make <br />remote workh1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        p>
        <button>Learn morebutton>
        <div class="clients-logos">
          <img src="https://i.postimg.cc/gJ9Y84m6/client-databiz.png" />
          <img src="https://i.postimg.cc/15DDqYSD/client-audiophile.png" />
          <img src="https://i.postimg.cc/5ybQqfbv/client-meet.png" />
          <img src="https://i.postimg.cc/g2NsxByN/client-maker.png" />
        div>
      section>
      <section id="img-side">
        <img
          class="desktop-img"
          src="https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png"
        />
        <img
          class="mobile-img"
          src="https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png"
        />
      section>
    main>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentora
      >. Coded by <a href="https://codehemaa.com">Ophy Boamaha>.
    div>
  body>
html>

Here's the full CSS code:

* {
  font-family: "Epilogue", sans-serif;
  font-size: 1.3rem;
}

.logo {
  font-size: 1.3rem;
}

li {
  list-style: none;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.mobile-nav {
    display: none;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

/* Client Logos */

.clients-logos img {
  width: 8rem;
  margin-right: -3rem;
}

.clients-logos {
  margin-top: 1rem;
  margin-left: -2rem;
  display: flex;
  width: 10rem;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

/* Main */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}
/* Images */
.desktop-img {
  display: block;
}
.mobile-img {
  display: none;
}

main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
#img-side img {
  width: 20rem;
}

.attribution {
  font-size: 0.7rem;
  text-align: center;
  margin-top: 5.5rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
  font-size: 0.7rem;
}

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: -3rem auto 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .clients-logos img {
  width: 30rem;
}

.clients-logos {
  margin-top: 1rem;
  display: flex;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 10rem auto 0 auto;
    text-align: center;
  }
}

Conclusion

As a web developer, layouts should be the first thing you consider before writing code. Thankfully, CSS Grid and Flexbox have revolutionized the way we structure and build website and web app layouts.

This makes these concepts a must know so you can specify the arrangement of elements on the web. We've discussed the fundamentals, so that you can easily build up on the knowledge and create beautiful web pages and apps.

Thanks for reading 👋🏾. I hope you found this helpful.

How to Use CSS Grid Layout – Grid Properties Explained with Examples

Okoro Emmanuel Nzube — Wed, 25 May 2022 15:32:31 +0000

Have you ever had a problem positioning items on your web browser? Perhaps every time you try to think of a solution, you become tired and give up.

If so, stay tuned as I reveal a new method for resolving these kinds of problems with minimal or no stress.

Welcome everyone. In this tutorial, we'll go through how to use the CSS grid layout.

First we'll learn what CSS Grid is and what it's meant to do. Then we'll go through the features of CSS grid, reasons why we should study it, and the benefits it brings to our projects. Finally, we'll discuss when it's best to use it.

What is CSS Grid?

So what is CSS Grid?

CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

Here is a concise definition of the CSS Grid layout:

CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created on the web. (Source)

Features of CSS Grid Layout

Flexible Track Sizes

You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive.

Item Placement

CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup.

Alignment Controls

The alignment of an element/item in a container is easier than ever before with CSS Grid. In the container, you can now arrange elements/items horizontally and vertically as you wish.

Benefits of CSS Grid

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers.

The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid.

All in all, CSS Grid Layout helps us build a more complex layouts using both columns and rows.

When Should You Use CSS Grid

Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it's ideal.

For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).

Grid is also a good choice when we need a space or gap between elements. By using the CSS grid gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

CSS Grid Properties

The CSS grid layout consists of many grid properties. Now we'll take a look at some of them so we can learn how to use them.

Grid container property

This is a CSS grid property that houses the grid items/elements. We implement the CSS grid container property by setting the container to a display property of grid or in-line grid.

For Example:

display: grid;

display: in-line grid;

Grid-template-column property

This is a property used to set each column’s width. It can also define how many columns you want to set to your project.

You can implement the CSS gird column property using grid-template-column.

For Example:

grid-template-column: 100px auto 100px;

The code above shows that we have three columns. The width of columns one (the first column) and three (the third column) are set to 100px. The width of column two (the middle column) is set to auto.

This means that as the size of your screen increases, columns one and three take 100px of the screen width, while column two takes the remaining width of the screen (which is auto).

Grid-template-row property

You use the CSS row property to set the height of each column. You can also use it to define how many rows you want to set in your project.

You can implement the CSS gird row property using grid-template-row, like this:

grid-template-row: 50px 50px;

The code above shows that we have a total of two rows and those two rows are 50px high.

Note that we can also assign the column and row property to our HTML code at once by simply using gird-template. Grid-template is another way of representing the grid-template column and grid-template-row.

For example:

 grid-template: 50px 50px / 100px auto 100px;

The code above will give you the same result as grid-template-column and grid-template-row.

To use the grid-template property, you will have to assign the value to the row first before assigning the column's value, just like the code above. The 50px 50px is for the row while 100px auto 100px is for the column.

A way to remember this is by thinking of the letter L:

grid-template

Try this out and see it for yourself.

A gird with a column of 100px auto 100px and row of 50px 50px

Column-gap property

As the name states, it is a grid property that assigns a space between two or more columns in a container. You can do this by using the column-gap property and giving it a value. For example:

column-gap: 20px;

From the code above, you can see that a gap of 20px was assigned to the column.

20px column-gap

Row-gap property

Just like column-gap, row-gap is a CSS property that assigns a space between two or more rows in a container. For example:

row-gap: 50px;

row-gap: 50px;

Note that we can also assign a gap to both the columns and rows of a container by using the gap property. For this to work, we only assign one value to both the columns and the rows of the container, just like we did in the code above.

Here's an example:

gap: 20px;

gap: 20px

From the diagram above, we can see that a gap of 20px was set to both the columns and rows of the container making them equally spaced.

Justify-content property

This is a grid property that you use in positioning items (columns and rows) horizontally in a container. It displays how the web browser positions the spaces around the items (columns and rows).

The justify-content property has six possible values:

Start
end
center
space-around
space-between
space-evenly

Start

This positions the items at the left side of the browser and can be executed with the following code:

justify-content: start;

justify-content: start;

End

This positions the items at the right side of the browser and can be executed with the following code:

justify-content: end;

justify-content: end;

Center

This positions the items at the center of the browser and can be executed with the following code:

justify-content: center;

justify-content: center;

Space-around

This property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next container.

This code can be executed like this:

justify-content: space-around;

justify-content: space-around

Space-between

Just like the space-around property, space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container. It takes up the entire width of the container.

This code can be executed like this:

justify-content: space-between;

justify-content: space-between

Space-evenly

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container.

This code can be executed like this:

justify-content: space-evenly;

justify-content: space-evenly;

Note that all the justify-content properties position their items/elements horizontally. Try doing it yourself to understand it more.

Align-content property

Align-content is the opposite of justify-content. You use the align-content property in positioning items vertically in a container.

Just like justify-content, the align-content property has six possible values:

Start
end
center
space-around
space-between
space-evenly

Start

This positions the items at the top of the browser and can be executed with the following code:

align-content: start;

align-content: start;

End

This positions the items at the bottom of the browser and can be executed with the following code:

align-content: end;

align-content: end

Center

This positions the items at the center of the browser and can be executed with the following code:

align-content: center;

align-content: center;

Space-around

This property distributes the items along the side of the container evenly, where each item in the container has an equal amount of space from the next one vertically.

This code can be executed like this:

align-content: space-around;

align-content: space-around

Space-between

Just like the space-around property, Space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container, and takes up the entire width of the container in the vertical direction.

This code can be executed like this:

align-content: space-between;

align-content: space-between

Space-evenly

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one vertically.

This code can be executed like this:

align-content: space-evenly;

align-content: space-evenly

Conclusion

In today's article, we studied what CSS Grid Layout is all about, why we should learn it, and the properties of CSS grid.

Thank you for reading.

Have fun coding!

HTML Center Image – CSS Align Img Center Example

Kolade Chris — Tue, 01 Feb 2022 21:16:57 +0000

If you're making websites with HTML and CSS, you will be working with images a lot.

Developers often struggle with image alignment in CSS, especially when trying to figure out how to center an image.

Centering anything in CSS is not really a straightforward thing - especially for beginners. This is why people brag about being able to center a div. :)

Since the img element is an inline element, this makes it a little bit harder to center. But don't worry, you can convert the image to a block element and then center it.

In this article, I'm going to show you 4 different ways you can align an image to the center.

How to Center an Image With the Text Align Property
How to Center an Image with Flexbox
How to Center an Image with CSS Grid
How to Center an Image with the Margin Property

How to Center an Image With the Text Align Property

You can center an image with the text-align property.

One thing you should know is that the tag for bringing in images – img – is an inline element. Centering with the text-align property works for block-level elements only.

So how do you center an image with the text-align property? You wrap the image in a block-level element like a div and give the div a text-align of center.

<div>
    <img src="fcc22.png" alt="freeCodeCamp" />
div>

div {
      text-align: center;
    }

How to Center an Image with Flexbox

The introduction of CSS Flexbox made it easier to center anything.

Flexbox works by putting what you want to center in a container and giving the container a display of flex. Then it sets justify-content to center as shown in the code snippet below:

  div {
      display: flex;
      justify-content: center;
    }

P.S.: A justify-content property set to center centers an image horizontally. To center the image vertically too, you need to set align-itemsto center.

How to Center an Image with CSS Grid

CSS Grid works like Flexbox, with the added advantage that Grid is multidimensional, as opposed to Flexbox which is 2-dimensional.

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid. Then set the place-items property to center.

 div {
      display: grid;
      place-items: center;
    }

P.S.:place-items with a value of center centers anything horizontally and vertically.

How to Center an Image with the Margin Property

You can also center an image by setting a left and right margin of auto for it. But just like the text-align property, margin works for block-level elements only.

So, what you need to do is convert the image to a block-level element first by giving it a display of block.

img {
      display: block;
      margin: 0 auto;
    }

Those 2 properties could be enough. But sometimes, you have to set a width for the image, so the left and right margin of auto would have spaces to take.

 img {
      display: block;
      margin: 0 auto;
      width: 40%;
    }

P.S.: You might not have to go as low as 40% for the width. The image was distorted at a 60+ percentage, that’s why I went as low as 40%.

I hope this article helps you choose which method works best for you in centering an image.

Thank you for reading.

How to Make an Animated Back to Top Button Using Only CSS

Temani Afif — Mon, 03 Jan 2022 21:18:12 +0000

Having a "back to top" button on a website is important. It allows users to easily scroll back to the top of the page.

Most websites rely on JavaScript to toggle the visibility of the button based on the amount of scroll. In this post, I will show you how to create such an effect using only CSS.

We will explore two kinds of effects – a "sliding" and a "fading" effect.

How to Make a Sliding Back to Top Button

Here is an overview of what we are building in this part:

Click to see the full code

CSS Flexbox and Grid Tutorial – How to Build a Responsive Landing Page with HTML and CSS

Kingsley Ubah — Wed, 08 Sep 2021 17:16:00 +0000

In this tutorial, we are going to build a simple landing page for an online education platform called Skilllz.

This tutorial will teach you how to use and implement CSS Flexbox and CSS Grid alignment. We'll also cover many other CSS concepts. And finally, we'll learn how to make the page responsive so that it works on all screen sizes.

The tutorial is divided into five parts:

How to Build the Navigation Bar
How to Build the Showcase Section
How to Build the Lower Section
How to Build the Footer Section
How to Make the Page Responsive

Each of these sections will teach you some new CSS and web development skills and tools. So let's jump right in.

How to Create the HTML Boilerplate

If you have emmet installed in your IDE, you can generate an HTML boilerplate for your project by typing ! and clicking the enter or tab key on your keyboard.

If not, you can copy this boilerplate code and paste it into your code editor:

html>
<html lang="en">
<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>Documenttitle>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
head>
<body>

body>
html>

How to Use Font Awesome Icons

As you can see in one of the shots, we will be using some font icons to give better swap to our service section.

For this, we will be using font awesome from the CDN. If you created an HTML biolerplate by yourself, copy the following link tag and paste it into your head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

Let's Get Started

First, make sure that your stylesheet file (.css) is properly linked to your HTML page.

The Navigation Bar section is going to be comprised of our site's name as well as two navigation links: Log in and check courses.

Here is the markup for our navbar:

class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllzh1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log ina>li>
                <li class="nav"><a href="" class="outline">Check coursesa                 li>
              ul>
            nav>
        div>
      div>

On the div wrapping the elements inside this section (the navbar), we register the container and flex class.

.container: we will use this utility class in every section to make sure that the inner elements do not exceed a certain width which we'll specify in CSS
.flex: we will use this utility class to display children elements in a horizontally aligned manner (side-by-side) using CSS Flexbox.

Inside the div we have an h1 with class of logo and two navigation links li>a with the outline classes, respectively.

At this point, our page will look all plain and bare like this:

No CSS yet

How to Apply CSS Styling to our Page

We now have to apply some CSS rules to style our nav section the way we want. What we want to do first is set the base styling for our web page with the following code:

/* Override default style and set padding and margin to nothing */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

/* White text throughout */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Make all link text black with no text decoration */
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* All images must not be larger than parent container */
img {
  width: 100%;
}

/* No styling on list items */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}

With the default styles applied, our page will now look like this:

Next, we need to define the styling for our container class:

/* Centers it, sets a maximum width and makes sure elements can flow past it*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}

Now, our content will not exceed the maximum width specified.

After that, we need to set the background color of our navbar section to purple:

/* Sets background color, height and padding*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}

Then we target only the h1 element inside the navbar and specify the following styles:

/* Sets font size, reduces font-weight, adds margin and line height */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

With that style applied, our h1 heading will look like this:

Now we need to display both child elements inside the container h1 and nav side-by-side using Flexbox.

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

First, we set the display mode to flex. This will align the elements side by side by default.

We then justify the content, adding a considerable space between each item using the space-between value. We align the items to appear at the center (middle) of the container and set its height to take up the entire container.

This is what our page should now look like:

Cool right?

However, we also do not want both of our navigation link stacked on top of each other. Instead, we want them to be displayed side-by-side. Guess how we do that? With Flexbox!

.navbar ul {
  display: flex;
}

/* Changes the color of both links to white, adds padding between them and margin as well */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}

Our page will now look like this:

The power of CSS flexbox

If you watched the brief intro video, you will notice that whenever I hover over any of the links, the text color changes to a lighter shade of purple and a solid border appears below it.

We can implement this transition using the CSS :hover pseudo-element:

.navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}

Now watch this:

Hover effect on the links

And with that, we have come to the end of the navbar section.

How to Build the Showcase Area

The showcase area is going to house the headline text, supporting text, a form for signing up new users, as well as a headline image.

This section is going to be divided in two: the left side and the right side. In other words, it will be displayed as a grid of two units.

Here is the markup for this section:

<section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Learn any digital skill of your choice todayh1>
                  <p class="supporting-text"> Over 30,000 students currently learn with usp>
                div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Enter your email address">
                    <input type="submit" class="btn" value="Start Learning">
                  form>
                  <p class="little-info">Try out our free courses today. No risk, no credit card requiredp>
                div>
              div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                div>
              div>
           div>

        div>
      section>

Currently, our app is going to look a bit messy:

How to Apply CSS Styling to our Showcase Area

First, we set the height of the showcase section as well as a background color:

.showcase {
  height: 300px;
  background-color: purple;
}

Our app will now look like this:

Still messy

NOTE: I changed the color of h1 to white

Next, we apply the following styles:

/* Adds margin below the text */
.showcase p {
  margin-bottom: 30px;
}

/* Adds a shadow below the image */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Adds some padding on the form content */
.showcase-form {
  padding-left: 7px;
}

This brings us to the main activity. If you remember, I said that we were going to be creating two sections (grids) inside the showcase container. With the grid class registered on that container, we can align its content using CSS grid display like this:

.grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}

This will create two columns inside of our showcase container. The first part will take up 60 percent of the container, and the second part will take up the remaining 40 percent of the container.

The overflow visible will ensure that the image (if bigger than the container) will flow beyond the container.

Our app will now look like this

Next, we need to set some space between the navigation area and the showcase area.

.grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}

As a result, it is now spaced out a bit:

Now, we need to style both of our form inputs because they don't look so nice. We select the first input by its type (email) and select the second by its class name, btn.

.showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

This style will transform both our form inputs to this:

Form input styled better

Also maybe change the font of the supporting text:

.showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}

This is the final look of our showcase section:

Final look of showcase section

That's it for this section!

How to Build the Lower Part of the Page

The lower part of the page is going to contain two sections, the stats section and the testimonials section.

The stats container which displays the services offered by Skilllz will be made up of three divs, each of which houses a font awesome icon, an h3 of class title, and a paragraph p of class text.

The testimonial container will hold the testimonials of three random people who learned using Skillz. I grabbed the pictures from unsplash.

How to Build the Stats Section

First, we are going to work on the stats section. The text is just a dummy 'lorem50' text to act as a filler for this demo.

Here is the markup for it:

<div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true">i>
            <h3 class="title">Over 300 available coursesh3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true">i>
            <h3 class="title">Free certificate offered on all coursesh3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true">i>
            <h3 class="title">Book 1on1 session for as low as $5h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
        div>
      section>

This section will be displayed as a blank page. This is because we had set the color of our text in the whole body to white. So we have to add some styling.

How to Apply CSS Styling to the Stats Section

First we need to apply the following styles:

/* Centers the container, sets a maximum width
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Targets all h3 with class of title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Targets the paragraphs with class name of text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}

This will now make our text visible:

Notice that the font icons from Font Awesome are not visible. We will be working on that pretty soon.

But before then, we will need to do something important. We do intend for all of the three stat divs to be aligned horizontally (side-by-side). To achieve that, we will once again be using CSS Flexbox:

/* Display horizontally, put a little space around them */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Add some padding around the container. Align text centrally */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Set margin and width */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}

This is how our app will now look:

Still no icons? Time to fix that!

.stats .fa {
  color: purple;
}

and voilà!

How to Build the Testimonials Section

The second section inside of the lower container div of the page is the testimonials section. This section is going to be made up of three cards, each of which contains the image of the person (clipped inside a circle), their name, and the person's testimonial.

Here is the markup for that:

<section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            div>
            <h3>Astonh3>
            <p>I have learnt web development using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            div>
            <h3>Bethh3>
            <p>I have learnt copywriting using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            div>
            <h3>Chrish3>
            <p>I have learnt affilitate marketing using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
        div>
      div>
    section>

How to Apply CSS Styling to it

First, we set the text color to black so we can see it:

.testimonial {
  color: black;
  padding: 40px;
}

When applied, it should make the text visible and add some padding to the section:

Next, we set the image to take up the height of its parent container:


/* Wrap the image inside a cirle shape and set height to take up all of parent element */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Align text centrally */

.testimonial h3{
  text-align: center;
}

If you check the final layout in the gif, you will notice that all three testimonial cards are aligned side-by-side on the same line.

So we will need to create a div of three equal columns using the CSS grid arrangement.

/* Create a grid of three equal columns. Set a gap of 40 px between them */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Create a white card with some shadow around it */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}

With all of these styles applied, the testimonials section will now look like this:

Finally, we style the circle div and position it relative to the top border of the card using CSS:

.circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}

And here is how everything will look in our browser:

Final look

Alright, now we're ready to move on to the footer section. Then we'll learn how to make the site responsive.

The final part of our landing page building process is to create the footer section. The footer section will comprise some copyright text, three extra navigation links, and a group of social media icons from Font Awesome.

Here is the HTML Markup for the footer section of our landing page:

<footer>
   <div class="container grid-3">
     <div class="copyright">
       <h1>Skilllzh1>
       <p>Copyright © 2021p>
     div>
     <nav class="links">
       <ul>
         <li><a href="" class="outline">Homea>li>
         <li><a href="" class="outline">Tutorsa>li>
         <li><a href="" class="outline">Categoriesa>li>
       ul>
     nav>
     <div class="profiles">
       <a href=""><em class="fab fa-twitter fa-2x">em>a>
       <a href=""><em class="fab fa-instagram fa-2x">em>a>
       <a href=""><em class="fab fa-facebook fa-2x">em>a>
       <a href=""><em class="fab fa-whatsapp fa-2x">em>a>
     div>
   div>
 footer>

The footer section will look unattractive without any styling:

No CSS yet

So let's change that.

First, we need to set the background colour for the footer section (as well as the color for all links) to white, like this:

/* Add padding around the footer as well */

footer {
  background-color: purple;
  padding: 20px 10px;
}

/* Sets all link texts to white and puts margin to the left and right */

footer a {
  color: white;
  margin: 0 10px;
}

Now the footer will look like this:

Footer

If you check the first gif, you will notice that when I hover over any of the links inside of the footer, their color changes to a lighter shade of purple and a border also appears below them.

We can make this happen using a :hover selector:

footer a:hover {
  color: #9867C5;
  border-bottom: 2px solid #9867C5;
}

That's all for the footer!

How to Set Media Queries to Make the Page Responsive

It's now time to make our landing page more responsive. When building a website, it is important to have in mind that users will be viewing the site from different devices. So it is imperative to make the site layout responsive to improve the user experience across multiple devices.

In our CSS, we will define media queries which set breakpoints for the various screen widths of different devices and map a set of CSS rules for each screen size.

How to Design for Tablets and Smaller Screens

First, we will optimize our site's layout for users viewing from a tablet. In our CSS, we define the following style:

/* Tablets and Under */

@media(max-width: 768px) {
  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

Initially we had set two columns for the .grid class and 3 columns for the grid-3 class. Now, we want to make sure that all grid items take up just a single line.

As a result, our form and image which was formerly displayed side-by-side (horizontally) will now be displayed one after the other (vertically), like this:

Next, we'll apply the following styles:

/* Align all text to the center. This will move all text, including form centrally */

.showcase {
    height: auto;
    text-align: center;
  }

/* This resets the width of the image container and adds margin space to the left */ 

.image {
    width: 600px;
    margin-left: 80px;
  }

/* Changes the service sections from side-by-side orientation to each taking its own line. Aligns text to the center */

.stats .flex {
    flex-direction: column;
  }

  .stats {
    text-align: center;
  }

/* Makes sure each stat section does not exceed the width of parent */

.stat {
    width: 100%;
    padding-right: 80px;
  }

/* (re)Moves the cirle to the center of the card */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 270px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }

And voilà! Our site now works on tablets and smaller screens.

The result

How to Design for Mobile Devices

Many people may view the site from a mobile device which typically has the smallest screen size out of all devices. Because of this, creating a layout for mobile-sized screens is very important.

/* Mobile devices */
@media(max-width: 500px) {
  .navbar {
    height: 100px;
  }

First, we increase the height of our navigation area. Since it will be viewed from a smaller screen, we want the area more accentuated for the user.

Then, we define the following styles:

/* Changes the alignment. The logo title stays at the top, the nav links will be below it */

.navbar .flex {
    flex-direction: column;
  }


/* When hovered on, retain white color and change border to black */

  .navbar a:hover {
    color: white;
    border-bottom: 2px solid black;
  }


/* Set light purple background on nav links, make it a bit round and add some spacing */

  .navbar ul {
    background: #9867C5;
    border-radius: 5px;
    padding: 10px 0;
  }


/* Align text to center */

  .showcase {
    height: auto;
    text-align: center;
  }


/* Reduce font size */

.little-info {
    font-size: 13px;
  }


/* Reduce image width */

  .image {
    width: 350px;
    margin-left: 70px;
  }

  .stat {
    margin-bottom: 40px;
  }


/* Move circle once again */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 150px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }
}

And voilà!

Wrapping Up

FlexBox and Grid alignment are very powerful tools for laying out a web page however you want it to look.

Responsive web design is arguably one of the most important design principles in web development. We have to consider the fact that our site will be viewed from various kinds of devices with different screen resolutions. Optimizing our site's layout for different screens will improve the user experience.

In this tutorial, we have designed a simple landing page using CSS Flexbox, Grid, and many other CSS properties. We have also made the page look good on Tablets and Mobile Screens.

The full code for this project can be gotten from this GitHub repository.

I hope you learned something useful from this tutorial. If you have any suggestions, reach out to me on Twitter. You can also visit my blog for posts like this.

Thanks for following along and see you soon.

The CSS Display Property – Display None, Display Table, Inline Block and More

Kolade Chris — Thu, 19 Aug 2021 20:47:14 +0000

In CSS, the display property determines how an element looks. It is also a crucial part of the presentation of your HTML code as it has a significant impact on layouts.

In fact, to use the modern Flexbox and Grid models, you need to use the display property before you get access to their various properties and values. This is one reason why the display property is so important in CSS.

Let's dive in and learn how to use the display property and all its different values.

Basic `display` Property Syntax

element {
        display: value;
     }

Display Property Values in CSS

There are inline and block-level elements in CSS. The difference between the two is that inline elements don't take up an entire space – that is, they don't start on a new line – but block elements do.

The display property takes many different values such as inline, inline-block, block, table, and more, which all influence the layout and presentation of an element on the web page. Also, to implement the flex and grid layouts, you need to use the display property.

You can use this display property to change an inline element to block, block element to inline, block and inline elements to inline-block, and many more.

`display: inline`

An element with a display property set to inline will not start on a new line and it will take up the remaining/available screen width. It just takes up the space such an element would normally take.

Because of this, you can't set the width and height of an element that has a display of inline, becuase it does not take up the whole screen width.

Some elements are inline by default, like , , , and .

CSS Grid - freeCodeCamp.org

How to Create a Masonry Layout Using HTML and CSS

Key Characteristics of Masonry Layouts

Common Uses

How It Works

How to Create a Masonry Layout

Step 1: Set Up Your Project

Step 2: Write the HTML

Step 3: Style with CSS

Step 4: View Your Layout

Putting it all together

Summary

How to Use Bento Grids Design in Your Web Projects

Prerequisites

The Philosophy Behind Bento Grids

The Rise of Bento Grids

Examining the Trend

Pros of Using Bento Grids

Cons of Bento Grids

Bento Grids in Practice

Common Rules of Bento Grids

Additional Information

Conclusion

Contact Information

Flexbox vs Grid in CSS – Which Should You Use?

Table of Contents:

Origin of CSS

Basic Structure of CSS

CSS Layout (Flex and Grid)

How to Use the Flex Layout in CSS

How to Set Display to Flex

How to Use the Grid Layout in CSS

How to Set Display to Grid

Similarities between Flex and Grid

When to Use Flex

When to Use Grid

Conclusion

How to Center Text Vertically with CSS

How to Center Text using Line Height

How to Center Text using Flexbox

How to Center Text Using CSS Grid

Conclusion

CSS Grid Handbook – Complete Guide to Grid Containers and Grid Items

Table of Contents

What is CSS Grid?

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

What Is a grid Value in CSS?

What Is an inline-grid Value in CSS?

Properties for Specifying a Grid's Layout

What Are the Grid Container's Properties?

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

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

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

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

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

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

What Is CSS Grid's justify-content Property?

What is justify-content: start in CSS Grid?

What is justify-content: center in CSS Grid?

What is justify-content: end in CSS Grid?

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

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

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

What Is CSS Grid's justify-items Property?

What is justify-items: stretch in CSS Grid?

What is justify-items: start in CSS Grid?

What is justify-items: center in CSS Grid?

What is justify-items: end in CSS Grid?

What Is CSS Grid's align-content Property?

What is align-content: start in CSS Grid?

What is align-content: center in CSS Grid?

What is align-content: end in CSS Grid?

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

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

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

What Is CSS Grid's align-items Property?

What is align-items: stretch in CSS Grid?

What is align-items: start in CSS Grid?

What is align-items: center in CSS Grid?

What is align-items: end in CSS Grid?

What Is a `grid` Value in CSS?

What Is an `inline-grid` Value in CSS?

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

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

What Is CSS Grid's `justify-content` Property?

What is `justify-content: start` in CSS Grid?

What is `justify-content: center` in CSS Grid?

What is `justify-content: end` in CSS Grid?

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

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

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

What Is CSS Grid's `justify-items` Property?

What is `justify-items: stretch` in CSS Grid?

What is `justify-items: start` in CSS Grid?

What is `justify-items: center` in CSS Grid?

What is `justify-items: end` in CSS Grid?

What Is CSS Grid's `align-content` Property?

What is `align-content: start` in CSS Grid?

What is `align-content: center` in CSS Grid?

What is `align-content: end` in CSS Grid?

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

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

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

What Is CSS Grid's `align-items` Property?

What is `align-items: stretch` in CSS Grid?

What is `align-items: start` in CSS Grid?

What is `align-items: center` in CSS Grid?

What is `align-items: end` in CSS Grid?

What Is CSS Grid's `justify-self` Property?

What is `justify-self: stretch` in CSS Grid?

What is `justify-self: start` in CSS Grid?

What is `justify-self: center` in CSS Grid?

What is `justify-self: end` in CSS Grid?

What Is CSS Grid's `align-self` Property?

What is `align-self: stretch` in CSS Grid?

What is `align-self: start` in CSS Grid?

What is `align-self: center` in CSS Grid?

What is `align-self: end` in CSS Grid?

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

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

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

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

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

What Is CSS Grid's `grid-row` Property?

What Is CSS Grid's `grid-area` Property?

How to use `grid-area` as a shorthand

How to use `grid-area` to specify a grid item's name

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

Important Stuff to Know about the `grid-template-areas` Property

1. `grid-template-areas` do not permit empty cells

3. `grid-template-areas` do not permit placing an item in multiple locations

4. `grid-template-areas` allows rectangular areas only

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

Syntax of the CSS `minmax()` function

How to use the CSS `minmax()` function

Examples of the CSS `minmax()` function

How to define a `70px` minimum and a `250px` maximum row grid size

How to define a `30%` minimum and a `70%` maximum column grid size

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

Syntax of the CSS `repeat()` function

Argument 1: `number-of-repetition`

`auto-fill` vs. `auto-fit`: What's the difference?

Argument 2: `track-list-to-repeat`

Examples of the CSS `repeat()` function

How to create a three-column grid container with `70px` column-widths

How to create a four-column grid container with one `50px` and three `90px` column-widths

How to create a five-column grid container with one `40px` and two `60px 1fr` column-widths

How to auto-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

How to auto-fit the grid container with a minimum of `50px` and a maximum of `1fr` wide columns

How to use the `align-items` attribute