CSS Layouts

Structuring your page

Normal Flow

With HTML, the normal flow is a top-to-bottom rendering of the elements. Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. Inline elements appear adjacent to each other. How each element “flows” depends on its default display property — the most common are block and inline properties.

						
<h1>Normal Flow</h1>
<p>
	With HTML, the normal flow is a top-to-bottom
	rendering of the html file.
</p>
<p>
	Every block-level element appears on a new line, 
	causing each item to appear lower down the page than 
	the previous one. <em> Inline elements appear 
	adjacent to each other.</em>
</p>

Normal Flow

With HTML, the normal flow is a top-to-bottom rendering of the html file.

Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. Inline elements appear adjacent to each other.

h1 and p elements are block, while em elements are inline.

The display property

While each html element comes with a default display property, this can be changed by overriding the default behavior with CSS. For example, <div> elements by default have the property display: block;, for example, but this can be adjusted by adding display: inline and specifying a width property for div in CSS.

`inline`	displays an element as an inline element (ex. `li{ display: inline; }`)
`block`	displays an element as a block element (ex. `img{ display: block; }`)
`inline-block`*	displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box (ex. `.columns{ display: inline-block; }`) and allows you to define a width and height.

Note: Because it is an inline element, white spaces between elements are treated in the same way as white spaces between words of text. You may get unwanted gaps appearing between elements if you have spaces are line breaks between your elements in your code.

Grids

CSS Grid allows you to define the column-row structure for all of your content. By declaring display: grid on a container element, child elements need to be defined where they align to on the grid.

Grid HTML


<div class="container">
  <div class="cell item">
    .special
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
</div>

Grid CSS


.container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr;
  column-gap: .5em;
  height: 200px;
}
 
.special{
  grid-column-start: 1;
  grid-column-end: 4;
}

 div with .special class

container element has the property display: grid;
elements within the container will automatically take up 1 grid cell (column & row)

Flexbox

Flex box is a popular method for creating “flexible” columns of containers. By declaring display: flex on a container element, child elements could be made to shrink or expand according to specified properties

See how it works
Read more on flex-box properties
A starting point for a responsive flex grid
A game: Flexbox Froggy

Flex HTML


<div class="container">
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
</div>

Flex CSS


.container{
  display: flex; 
  column-gap: .5em;
}

.col{
  flex: 1;
}
.col:nth-child(2){
	width: 100px;
}		
.col:nth-child(3){
	flex: 2;
}

					    One third
					  
					    This is 100px wide
					  
					    Two-thirds of the remaining width.

container element still is set to fill the entire document width and has the property display: flex;
elements within the container will automatically scale to fit the available width, unless specified
advantage: you can combine a fixed-width column and a responsive, scalable column

Grid vs. Flexbox vs. Inline-block?

Grid is better used for defining larger content areas, including vertical alignment of elements using rows
Flexbox is better suited for organizing chunks within those areas, or when you need columns to stretch flexibly
Inline-block is best for when you simply want elements to flow next to each other

Ordered from providing the least to the most structure:

Inline / Inline-block
Flexbox
Grid