How to use Flexbox and CSS Grid for efficient layout

The CSS float property has always been one of the primary methods for arranging elements on a website, but it's not always ideal when implementing complex layouts. Fortunately, in the modern era of web design, aligning elements using Flexbox and CSS Grid has become relatively easy.

 

Using Flexbox can make element alignment easy, so Flexbox has been widely used.

At the same time, CSS Grid layout has also brought great convenience to the web design industry. Although CSS Grid layout is not widely adopted, browsers are gradually starting to add support for CSS Grid layout.

 

While Flexbox and CSS Grid can accomplish similar layouts, this time, we're going to learn how to combine the two tools, rather than just picking one or the other. When CSS Grid layouts gain full browser support in the near future, designers will be able to take advantage of each CSS combination to create the most efficient and interesting layout designs.

 

Test the basic layout of Flexbox and CSS Grid

We start with a very simple and familiar layout type with sections like header, sidebar, main content, and footer. Through such a simple layout, it helps us to quickly find the layout method of various elements.

Here's what needs to be created: 

To accomplish this basic layout, the main tasks that Flexbox needs to accomplish include the following:

• Create full width header and footer
• Position the sidebar to the left of the main content area
• Make sure the sidebar and main content area are the right size
• Ensure accurate positioning of navigation elements

 

Basic HTML Structure

<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->
    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /container -->

 

Create layouts with Flexbox

• Header style

We start the design layer by layer from the outside to the inside, first adding display: flex; to the container, which is the first step in any Flexbox layout. Next, set flex-direction to column, making sure all sections are facing each other.

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

Automatically create a full-width header with display: flex; (header is a block-level element by default). With this declaration, the placement of navigation elements becomes easy.

The navigation bar has a logo and two menu items on the left and a login button on the right. The navigation is located in the header, and the automatic spacing between the navigation and the button can be achieved by justify-content: space-between;.

In navigation, use align-items: baseline; to align all navigation items with the text baseline, which also makes the navigation bar look more uniform.

code show as below:

header{
    padding: 15px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

• page content style

Next, wrap the sidebar and main content area with a wrapper. A div with class .wrapper also needs to set display: flex; but the flex direction is different from above. This is because the sidebar and main content area are next to each other instead of stacked.

.wrapper {
    display: flex;
    flex-direction: row;
}

The sizing of the main content area and sidebar is very important because important information is displayed here. The main content area should be three times the size of the sidebar, which is easy to achieve with Flexbox.

.main {
    flex: 3;
    margin-right: 60px;
}

.sidebar {
   flex: 1;
}

Overall, Flexbox is very efficient at creating this simple layout. Especially useful for controlling the styling of list elements and setting the spacing between navigation and buttons.

 

Create layouts with CSS Grid

To test efficiency, next create the same basic layout using CSS Grid. 

• Grid template area

The convenience of CSS Grid is that template areas can be specified, which also makes defining layouts very intuitive. Taking this approach, areas on the grid can be named and refer to location items. For this basic layout, we need to name four items:

• header
• main content
• sidebar
• footer

Basic HTML Structure

<div class="container">
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
   
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
            <li></li>
   　　　　　 <li></li>
    　　　　　<li></li>
   　　　　　 <li></li>
        </ul>
    </aside>
 
    <section class="main">
        <h2></h2>
        <p></p>
        <p> </p>
    </section>
 
    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div>

We define these areas in the grid container in order, just like drawing them.

grid-template-areas:

        "header header"

        "sidebar main"

        "footer footer";

Currently the sidebar is on the left, the main area content is on the right, and the order can be easily changed if needed.

One thing to note: these names need to be "connected" to styles. So you need to add grid-area: header; in the header block.

header{
    grid-area: header;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

The HTML structure is the same as in the Flexbox example, but the CSS is completely different from creating a grid layout.

.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-gap: 50px;
}

When using CSS Grid layout, it is very important to set display: grid; in the container. The grid-template-columns are declared here to ensure the overall structure of the page. Here grid-template-column has set the sidebar and main content area sizes to 1fr and 3fr. fr is the fractional unit of the grid.

 

Next, the fr unit in the header container needs to be adjusted. Set grid-template-columns to 1fr and 1fr. This way, there are two columns of the same size in the header, which would be appropriate for navigation items and buttons.

header{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

To place the button, we just need to set justify-self to end.

header button {
    justify-self: end;
}

The location of the navigation is set as follows:

header nav {
    justify-self: start;
}

 

Create layouts with Flexbox and CSS Grid

Finally, we create more complex layouts by combining Flexbox and CSS Grid.

 

The basic layout is shown below:

This layout needs to be consistent in both the row and column directions, so using CSS Grid to achieve the overall layout works well.

 

Planning is very important for the realization of the layout.

Next, let's see how the code is implemented step by step. First, display: grid; is the basic setting, and secondly, the spacing between content blocks can be achieved through grid-column-gap and grid-row-gap.

.container {
  display: grid;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

• Column and row layout

The Header section spans all columns.

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #d5c9e2;
}

A shorthand can also be used, with the start and end values ​​on the same line and separated by a slash. like this:

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #55d4eb;
}

Once you've built your grid layout, fine-tuning the content is the next step.

• navigation

Flexbox is great for placing header elements. The basic header layout needs to set justify-content: space-between.

In the CSS Grid layout example above, you need to set justify-self: start; on the navigation bar and justify-self: end; on the button, but if you use Flexbox, the spacing of the navigation becomes easy to set.

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

• Column Content Grid

Arranging the desired elements in one direction means all elements are in the same horizontal dimension, and Flexbox is usually a better choice for this layout. Additionally, Flexbox can dynamically adjust elements. With Flexbox, all elements can be connected in a straight line, which also ensures that all elements have the same height.

• Row content with text and buttons

The image below shows three areas that contain "extra" text and buttons. Flexbox makes it easy to set the width of three columns.

.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

 

Summary of Design Approach

In the above layout design, CSS Grid is used for the overall layout (and the non-linear part of the design). For the design of grid content areas, it is easier to use Flexbox for sorting and fine-tuning the styles.

Original link: https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/

Please indicate the source of the reprint: Grape City Controls

 

About Grape City

Grape City is a global leader in the control industry, a world-leading provider of enterprise application customization tools, enterprise reports and business intelligence solutions, serving more than 75% of the global Fortune 500 companies.