How to use Flexbox and CSS grids for efficient layout

CSS floating properties have always been one of the main ways of arranging elements on a site, but this approach is not always ideal when implementing complex layouts. Fortunately, in the modern web design era, using Flexbox and CSS grids to align elements becomes relatively easy.

Using Flexbox can make it easy to align elements, so Flexbox is already widely used.

At the same time, CSS Grid layout has brought great convenience to the web design industry. Although the CSS grid layout is not widely adopted, the browser gradually begins to add support for the CSS grid layout.

While Flexbox and CSS grids can do similar layouts, this time, we're learning how to combine the two tools instead of just one. In the near future, when the CSS Grid layout gets full browser support, designers can take advantage of each CSS combination to create the most effective and interesting layout designs.

Test the basic layout of Flexbox and CSS grids

We start with a very simple and familiar layout type, including headings, sidebar, main content and footer sections. With such a simple layout, we can quickly find the layout method of various elements.

Here's what you need to create:

650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110009884-901638498. JPG "width=" 531 "height=" 525 "/>

To complete this basic layout, the main tasks that Flexbox need to complete include the following:

• Create full-width headers and footer

• Place the sidebar on the left side of the main content area

• Make sure the sidebar and main content area are the right size

• Ensure navigation elements are positioned accurately

Basic HTML structure

<div class= "Container" >    

Create a layout using Flexbox
 
 

  
  
 
   
Header style
 
  
 
 
We start from the outside to the inside, starting with the design, first will Display:flex; Added to container, which is also the first step in all Flexbox layouts. Next, set flex-direction to column to make sure that all parts are relative to each other.
. container {Display:flex; Flex-direction:column;}
Through Display:flex; Automatically creates a full-width header (the header is a block-level element by default). This declaration makes it easy to place navigation elements.
There is a logo and two menu items on the left side of the navigation bar, and a login button on the right. Navigation is located in the header, through Justify-content:space-between; You can implement automatic intervals between navigation and buttons.
In the navigation, use Align-items:baseline; The ability to align all navigation items with the text baseline also makes the navigation bar look more uniform.
650) this.width=650; "src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110530931-1941712144.jpg "/>
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;}
 
 

  
  
 
   
Page content Style
 
  
 
 
Next, include the sidebar and the main content area with a wrapper. Div with. Wrapper class, also need to set Display:flex; But the flex direction differs from the above. This is because the sidebar and the main content area are adjacent to each other rather than stacked.
. wrapper {Display:flex; Flex-direction:row;}
650) this.width=650; "src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110514618-1006690725.jpg "/>
The size setting of the main content area and sidebar is important, as important information is shown here. The main content area should be three times times the size of the sidebar, which is easy to achieve with Flexbox.
. main {flex:3; margin-right:60px;}. sidebar {flex:1;}
In general, Flexbox is very efficient when creating this simple layout. This is especially useful in controlling list element styles and setting the spacing between navigation and buttons.

Create a layout using a CSS Grid
To test efficiency, next use CSS Grid to create the same basic layout.
650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110549525-1972002482. JPG "width=" 519 "height=" 576 "/>

 
 

  
  
 
   
Grid Template Area
 
  
 
 
The convenience of a CSS Grid is that you can specify a template area, which makes it very intuitive to define the layout. Taking this approach, the area on the grid can be named and referenced by the location item. For this basic layout, we need to name four items:

 
 

  
  
 
   
Header
 
   
Main content
 
   
Sidebar
 
   
Footer
 
  
 
 
Basic HTML structure
<div class= "Container" >    
We define these areas in order in the grid container, just as they are plotted.
Grid-template-areas:
"Header Header"
"Sidebar main"
"Footer Footer";
The current sidebar is on the left, the main area is on the right, and you can easily change the order if you want.
One thing to note: These names need to be "connected" to the style. So you need to add Grid-area:header to 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 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, set display:grid in container; Very important. Grid-template-columns is declared here to ensure the overall structure of the page. Here Grid-template-column has set the side bar and main content area size to 1FR and 3FR. FR is the fractional unit of the grid.
650) this.width=650; "src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110812306-464478185.jpg "/>
Next, you need to adjust the FR unit in the header container. Set the Grid-template-columns to 1fr and 1FR. In this case, there are two columns of the same size in the header, and it will be appropriate to place the navigation items and buttons.
header{Grid-area:header;    Display:grid; GRID-TEMPLATE-COLUMNS:1FR 1FR;}
650) this.width=650; "src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110829431-1198146622.jpg "/>
To place the button, we only need to set the justify-self to end.
Header button {justify-self:end;}
The location of the navigation is set in the following way:
Header nav {justify-self:start;}

Creating layouts using Flexbox and CSS grids
Finally, we create more complex layouts by combining Flexbox and CSS grids.
650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110911384-498762685. JPG "width=" 586 "height=" 544 "/>
The basic layout is as follows:
650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110920478-1738248932. JPG "width=" 592 "height=" 695 "/>
This layout requires consistency in both the row and column two directions, so it is very effective to use CSS grids for overall layout.
650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/139239/201709/139239-20170920110940540-1063780669. JPG "width=" 599 "height=" 793 "/>
Planning is important for the implementation of layouts.
Now let's see how the code is implemented step-by-step. First Display:grid; is the basic setting, followed by the spacing between content blocks, which can be implemented by 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 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;}
You can also use shorthand, where the starting and ending values are on the same line, separated by slashes. Just like this:
. Header {grid-column:1/4;  Grid-row:1/2; Background-color: #55d4eb;}
After you finish building the grid layout, fine-tuning the content is the next step.

 
  

  
   
 
    
Navigation
 
   
 
  
The Flexbox is ideal for placing header elements. The basic header layout needs to be set Justify-content:space-between.
In the above CSS Grid layout example, you need to set justify-self:start in the navigation bar, justify-self:end on the button settings, 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 required elements in one Direction means that all elements are in the same horizontal dimension, often flexbox is a better choice to implement this layout. In addition, Flexbox can dynamically adjust elements. With Flexbox, you can link all elements into a single line, which also ensures that all elements have the same height.

 
  

  
   
 
    
Line contents with text and buttons
 
   
 
  
Is three areas that contain "extra" text and buttons. The 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;}

Summary of Design methods
In the above layout design, the CSS Grid is used for the overall layout (and the non-linear part of the design). For the design of the grid content area, it is easier to use Flexbox to sort and fine-tune the styles.
Original link: https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/
Reproduced please specify from: Grape City control

About Grape City
Grape City is the global control industry leader, the world's leading enterprise application customization tools, enterprise reporting and business intelligence solutions provider, for more than 75% of the world's Fortune 500 enterprises.
This article is from the "Grape City Control Technology Team Blog" blog, be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1967099
How to use Flexbox and CSS grids for efficient layout