The CSS float property has always been one of the main ways to arrange elements on a website, but it’s not always ideal when implementing complex layouts. Fortunately, in the modern era of web design, it is relatively easy to align elements using Flexbox and CSS Grid.

Flexbox is already widely used because it makes it easy to align elements.

At the same time, CSS Grid layout for the web design industry has brought great convenience. Although CSS Grid layouts are not widely adopted, browsers are gradually adding support for CSS Grid layouts.

Flexbox and CSS Grid can achieve similar layouts, but this time, we’ll learn how to use both tools together, rather than just one. In the near future, when CSS Grid layouts gain full browser support, designers will be able to take advantage of each CSS combination to create the most effective and interesting layout designs.

Test the basic layout of Flexbox and CSS Grid

We’ll start with a very simple and familiar layout type, including headings, sidebars, main content, and footer sections. Through such a simple layout, to help us quickly find the layout method of various elements.

Here’s what you need to create:

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

• Create full-width headers and footers
• Place the sidebar to the left of the main content area
• Make sure the sidebar and main content area are the right size
• Ensure that navigation elements are positioned correctly

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 -->Copy the code

Use Flexbox to create the layout

• The Header style

Let’s start from the outside in, layer by layer, first display: flex; Add to container, which is also the first step in all Flexbox layouts. Next, set the Flex-direction to column, ensuring that all parts are opposite each other.

.container {
    display: flex;
    flex-direction: column;
}Copy the code

Through the display: flex; Automatically create a full-width header (headers are block-level elements 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. Navigation is in the header, via context-content: space-between; Automatic spacing between navigation and buttons can be achieved.

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

The code is as follows:

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

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

• Page content style

Next, enclose the sidebar and main content area with a Wrapper. Div with.wrapper class also needs to set display: flex; But Flex goes in a different direction. This is because the sidebar and the main content area are adjacent to each other rather than stacked.

.wrapper {
    display: flex;
    flex-direction: row;
}Copy the code

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

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

.sidebar {
   flex: 1;
}Copy the code

Overall, Flexbox was very efficient in creating this simple layout. This is especially useful for controlling the style of list elements and for setting the spacing between navigation and buttons.

Use CSS Grid to create the layout

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

• Grid template area

The convenience of the CSS Grid is that you can specify template areas, which makes defining layouts intuitive. In this way, regions on the grid can be named and reference location items. For this basic layout, we need to name four projects:

• 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>Copy the code

We define these areas in the Grid Container in order, just as we draw them.

grid-template-areas:

        “header header”

        “sidebar main”

        “footer footer”;

The current sidebar is on the left, the main area content is on the right, and you can easily change the order if you want.

One thing to note: these names need to be “wired” to the style. In header block, add grid-area: header; .

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

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;
}Copy the code

When using the CSS Grid layout, set display: Grid in the Container. Very important. 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, you need to adjust the FR unit in the Header container. Set grid-template-columns to 1fr and 1fr. This gives you two columns of the same size in the header, which is a good place to put navigation items and buttons.

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

To place the button, we simply set context-self to end.

header button {
    justify-self: end;
}Copy the code

The navigation position is set as follows:

header nav {
    justify-self: start;
}Copy the code

Use Flexbox and CSS Grid to create the layout

Finally, we created a more complex layout by combining Flexbox with CSS Grid.

The basic layout is shown below:

This layout needs to be consistent in both row and column directions, so using CSS Grid for the overall layout is very effective.

Planning is very important for the implementation of layout.

Let’s see how the code is implemented step by step. First of all the display: the grid; Grid-column-gap and grid-row-gap can be used for spacing between content blocks.

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

• Column and row layouts

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;
}Copy the code

You can also use shorthand, with the start and end values on the same line, separated by a slash. Something like this:

.header {
  grid-column:A quarter;
  grid-row:1/2;
  background-color: #55d4eb;
}Copy the code

After the grid layout is built, fine tuning is the next step.

• navigation

Flexbox is a great place to put header elements. The basic header layout needs to be set context-content: space-between.

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

.header {
  grid-column:A quarter;
  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;
}Copy the code

• Column content grid

Arranging the desired elements in one direction means that all elements are in the same horizontal dimension, and Flexbox is often a better choice for this layout. In addition, Flexbox can adjust elements dynamically. With Flexbox, you can connect all elements into a straight line, which also ensures that all elements have the same height.

• Line content with text and buttons

Below are three areas containing “extra” text and buttons. Flexbox can easily 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;
}Copy the code

Summary of design methods

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

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

Related reading:

More than 100 sets of report templates are free to download

Comparison of the 5 most popular front-end frameworks

2017 front end framework, class library, tool big competition

Angular vs React is the most comprehensive and in-depth comparison

This article is published by grape city control technology development team, reprint please indicate source: Grape city control

For more development tools and tips, please go to the official website of grape City controls

To learn about enterprise reporting and Web applications, visit the Grape City Enterprise Software website