CSS Flexbox and Grid

CSS flexbox and grid can be used for creating website layouts and positioning items on a web page. Here's an overview.

CSS flexbox and grid are two different layout models optimized for user interface design. Flexbox (also known as flexible box layout) deals with one-dimensional layouts, where you can lay out and align elements horizontally or vertically. Grid (also known as grid layout) goes a step further and allows you to build two-dimensional layouts, where you can lay out and align elements horizontally and vertically.

Here are some examples to demonstrate the concept of flexbox and grid layout.

Flexbox

Flexbox includes a number of properties that allow you to define a flexible box, as well as the behavior of the items inside it.

First, you declare the flex container by applying display: flex or display: inline-flex to it. This establishes a new flex formatting context for its contents.

Once you have a flex container, you can then apply the various flex properties to its children. The flex property is shorthand for the main flex properties, and it goes like this:

Here, we specify that the normal box "grow factor" is 1 and the larger box is 3. The grow factor specifies how much the flex item grows relative to the rest of the flex items in the flex container.

Check out the flexbox tutorial for more examples of what flexbox can do.

Grid Layout

Grid works similar to flexbox, in that you declare a grid container which establishes a new grid formatting context for its contents. You can define the grid as a set number or rows and columns, and their sizes, etc.

You define the grid container by using either display: grid or display: inline-grid.

Any direct children of the grid container are grid items, and you have complete control over where these are placed, how many rows or columns they span, etc.

Here's an example:

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
header, footer, article, nav, div {
  padding: 20px;
  background: gold;
}
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

In this example we use a kind of "ASCII art" to define a three-column website layout. This is just one of the many things you can do with grid layout. I've written a dedicated CSS grid tutorial that covers grid in more detail, so if you think you like what grid can do, check it out.