• structure / content (markdown document, HTML)

• style / design / layout

Examples: Headings (e.g. <h1> ), <p> all use block as their outer display type by default.

• breaks new line

• Fills up 100% of available space in container in the inline direction.

• Respects the width and height properties

• Padding, margin and border will push other elements away

Examples: <a> , <span> , <em> and <strong> - inline by default.

• will not break onto a new line.

• The width and height properties will be ignored.

• Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.

• Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

• relative to their default position in normal layout flow

• the other elements around them

• their parent container

• the main viewport/window.

1. as a block or inline element ( <outer-display> type)

2. and the layout used for its children (elements inside the box), such as flow layout, grid or flex ( <inner-display> type)

Line breaks before and after the element in the normal flow.

The next element will be on the same line if there is space in normal flow.

flow layout = block-and-inline layout, normal flow.

Depending on the value of other properties - such as:

• position

  Rather used for fine tuning, not for layouts.

  • position: static default, normal flow

  • position: relative moving relative to its position in normal flow

  • position: absolute moving relative to the edges of its parent element

  • position: fixed relative to the browser viewport (not another element)

  • position: sticky static, elements hits an offset from viewport, then like fixed

• float

  clearto turn floating off

  has 4 possible values:

  • left Floats the element to the left.

  • right Floats the element to the right.

  • none Specifies no floating at all. (default)

  • inherit property should be inherited from the parent element.

• overflow

  Sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

  /* Keyword values */
  overflow: visible;
  overflow: hidden;
  overflow: clip;
  overflow: scroll;
  overflow: auto;
  overflow: hidden visible;/* Global values */
  overflow: inherit;
  overflow: initial;
  overflow: unset;

z-index defines which elements should be placed in front.

should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.

CSS Properties:

• flex → sizing

  flex: 1; gives the element exactly one fraction unit

  flex: 200px; → means that each element must be at least 200px wide

• flex-basis

  specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.

• flex-shrink

  allows an item to shrink if the flex container is too small.

  Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it. → Takes numbers as values.

  The higher the number, the more it will shrink compared to other items - similar to fractional units.

• flex-grow

  controls the size of items when the parent container expands.

• flex-direction

  Initial value is row . Can be changed to column , column-reverse , row-reverse

• flex-flow

• flex-wrap → overflow

  When you have a fixed amount of width or height in your layout eventually your flexbox children will overflow their container, breaking the layout.

  ( flex: 200px; → means that each element must be at least 200px wide)

  This means extra items move into a new row or column.

  The break point of where the wrapping happens depends on the size of the items and the size of the container.

  • nowrap (default) does not wrap items

  • wrap wraps items onto multiple lines

  • wrap-reverse wraps items onto multiple lines in reverse order

• order

  used to tell CSS the order of how flex items appear in the flex container.

  By default, items will appear in the same order they come in the source HTML.

Alignment Properties:

Aligns the items in the flex container

• justify-content → x-Axis (main axis)

  • flex-start (default) start

  • flex-end end

  • space-between center, with space between items - first and last are locked to edges

  • space-around like space-between but first and last are not locked to edges

  • space-evenly Even space distribution with full space at bith ends

  • center center

• align-content → y-Axis (cross axis)

  • stretch (default) stretch to fill entire container

  • flex-start start

  • flex-end end

  • center center with equal space

  • baseline baselines (is a text concept $\approx$ the line that the letters sit on)

• align-items

• align-self → individual

  accepts the same values as align-items and will override any value set by the align-items property.

• place-content

• place-items

• row-gap

• column-gap

• gap

Lining things up in rows and columns + gaps between them ( gutters ).

For designs where elements don’t jump around or change width as we move from page to page, providing greater consistency websites.

Components:

Properties:

• Grid Container properties

  Sizing

  grid-template-columns and grid-template-rows : The number of parameters given indicates the number of columns or rows in the grid, and the value of each parameter indicates the width or height of each.

  Spacing

  grid-column-gap or grid-row-gap : sets spacing between cells

  Units

  You can use absolute and relative units like px and em in CSS Grid to define the size of rows and columns. You can use these as well:

  • fr : sets the column or row to a fraction of the available space,

  • auto : sets the column or row to the width or height of its content automatically,

  • % : adjusts the column or row to the percent width of its container.

  • repeat() : can also use auto-fill or auto-fit as an input

    repeat(auto-fill, minmax(60px, 1fr));

    When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. - If your container can't fit all your items on one row, it will move them down to a new one.

  • minmax() : defines a minimum and maximum value

• Grid Cell properties

  Indexing starts with 1.

  

  Sizing

  grid-column / grid-row : To control the amount of columns / rows an item will consume: the line numbers you want the item to start at / stop at.

  Alignment (x-Axis)

  justify-self :

  • stretch : (default) will make the content fill the whole width of the cell.

  • start : aligns the content at the left of the cell.

  • center : aligns the content in the center of the cell,

  • end : aligns the content at the right of the cell.

  Alignment (y-Axis)

  align-self

• Grid Area properties

  grid-template-areas : group cells of your grid together into an area and give the area a custom name.

  grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";

  The code above merges the top three cells together into an area named header, the bottom three cells into a footer area, and it makes two areas in the middle row; advert and content. In addition to custom labels, you can use a period (.) to designate an empty cell in the grid.

  After creating an area's template for your grid container, you can place an item in your custom area by referencing the name you gave it:

  .item1 {
  grid-area: header;
  }

  This lets the grid know that you want the item1 class to go in the area named header . In this case, the item will use the entire top row because that whole row is named as the header area.

  If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:

  item1 { grid-area: 1/1/2/4; }

  The numbers in the example above represent these values:

  grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

  So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.

Flexbox and Grid are not mutually exclusive within a page.

Flexbox (1D) - Content first ▪ Enable existing content to align and adapt ▪ Rules decided by children

Grid (2D) - Layout first ▪ Specific rigid layout in mind children are placed in ▪ Declaratively control specifically where elements end up — Rules decided by parent

• Header, Footer

• Fluid content, fixed sides

• >2 equal height columns

• Content before remaining columns

• “order” property only for visual ordering

• Media queries: Let content fill the container and define min/max constraints

• Use relative units to specify position and size of text and media

• Fluid, Grid-based Layout

• Resposive Images

• Font Scaling

• ...

Scale images like other content using relative values.

<picture>
<source	src="pic-mobile.jpg"	media="(max-width: 720px)"	/>
<source	src="pic-tablet.jpg"	media="(max-width: 1280px)"	/>
<source	src="pic-desktop.jpg"	/>
<img	src="default.png"	/>	<!–-	User	Agent	not	supporting	picture	element	-->
</picture>

Picture isn't supported on every browser → Using <img> just in case problem occurs

• Visible area of webpage

• Size content to viewport

• Avoid horizontal scrolling

• Avoid necessity to zoom

• Control viewport in HTML5 through meta-element

  <meta name="viewport"
  content=
  "width=device-width,
  initial-scale=1.0,
  maximum-scale=3,
  minimum-scale=0.5" />

• Consider mobile → Sometimes narrower/wider, default shrinking

@media	only	screen	and	(max-width:	500px)	{	…	}
@media	tv	and	(min-width:	700px)	and	(orientation:	landscape)	{	…	}
<!--	comma	acts	as	'or'	-->
@media	(min-width:	700px),	handheld	and	(orientation:	landscape)	{	…	}

@media	screen	and	(min-width:	481px)	and	(max-width:	768px)	{
p	{	font-size:	0.9em; }
}
@media	screen	and	(max-width:	480px)	{
p	{	font-size:	0.7em; }
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

https://www.freecodecamp.org/learn/responsive-web-design

http://flexboxfroggy.com/#de

CSS Selectors explained in plain English

Some browsers still dont support newer layouts: http://caniuse.com

https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/

https://gridbyexample.com/examples/