Display Property

Keep in mind that the example above is describing the block elements. Opposite to that the element would be displayed one next to each other if the example would be describing the inline elements.

On that end, it has be said that, by default, the content of a block-level element grows along the block dimension to fit its content, filling the parent element’s available inline space. Inline-level elements are only as big as their content allows them to be.

Most of the elements with display property value set as inline, you can set width or height to decide about their sizing.

There is also option of mixing both display methods through inline-block property value.

Let’s see how it looks on examples:

Display: block

Elements are stack upon each other, and width and height properties are respected:

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  display: block; /* observe the span element */
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  width: 128px; /* observe the sizing of the element */
  height: 64px; /* observe the sizing of the element */
}

<div class="container">
  <p>This is a testing copy, <span class="box">placed here</span> <span class="box">in order</span> to prove a point.</p>
</div>

Display: inline

Elements are placed next to each other, and width and height properties are not respected:

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  display: inline; /* observe the span element */
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  width: 128px; /* observe the sizing of the element */
  height: 64px; /* observe the sizing of the element */
}

<div class="container">
  <p>This is a testing copy, <span class="box">placed here</span> <span class="box">in order</span> to prove a point.</p>
</div>

Display: inline-block

Elements are placed next to each other, but width and height properties are respected:

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  display: inline-block; /* observe the span element */
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  width: 128px; /* observe the sizing of the element */
  height: 64px; /* observe the sizing of the element */
}

<div class="container">
  <p>This is a testing copy, <span class="box">placed here</span> <span class="box">in order</span> to prove a point.</p>
</div>

Position Property

By overriding normal document flow, positioning allows us to produce interesting results. What if you want to slightly reposition some containers from their default flow position to create a quirky, distressed look? Your tool is positioning.

What if you want to create a UI element that floats above other parts of the page and/or always sits in the same place inside the browser window regardless of how far the page is scrolled? Such layout work is made possible by positioning.

Position: static

Every element gets static positioning by default. It simply means — place the element in its normal position in the document flow.

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  position: static;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
}

<div class="container">
  <div class="box">
    <p>Box</p>
  </div>
</div>

Position: relative

Position: relative similar to static positioning, except that after the positioned element has taken its place in the normal flow, you can then modify its final position, including overlapping other elements on the page.

Alongside position property, top, bottom, left, and right properties are used to specify where the positioned element should be moved.

.container {
  background: #292a2e;
  padding: 24px;
}
.box{
  position: static;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
}
.box-moved {
  position: relative;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  right: 16px;
  top: 16px;
}

<div class="container">
  <div class="box">
    <p>Box</p>
  </div>
  <div class="box-moved">
    <p>Box-moved</p>
  </div>
</div>

Position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

This is extremely beneficial because it allows us to create isolated UI features that do not interfere with the layout of other elements on the page.

Top, bottom, left, and right properties are also used to specify where the absolutely positioned element should be moved.

.container {
  position: relative;
  background: #292a2e;
  padding: 24px;
}
.box{
  position: static;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
}
.box-absolute{
  position: absolute;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  left: 16px;
  top: 16px;
}

<div class="container">
  <div class="box">
    <p>Box</p>
  </div>
  <div class="box-moved">
    <p>Box-moved</p>
  </div>
</div>

Position: fixed

When an element has position: fixed, it is placed relative to the viewport, meaning it always remains in the same spot regardless of how far the page is scrolled.  top, right, bottom, and left properties.

To position the element, use its top, bottom, left, and right properties.

Note that box-fixed is glued to the bottom right corner of the page.

.container {
  position: relative;
  background: #292a2e;
  padding: 24px;
}
.box{
  position: fixed;
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  font-weight: 500;
  bottom: 24px;
  right: 24px;
}

<div class="container">
  <div class="box">
    <p>Fixed</p>
  </div>
</div>

Float Property

The positioning and formatting of content on the page can be controlled by the CSS float property. It is most frequently used to encircle text and images. However, you can use the float property to wrap any inline components, including list, paragraph, div, span, table, iframe, and blockquote.

The float property specifies how an element should float. The floated element will be removed from the standard flow of the page, but it will remain part of the flow — meaning, the element will be shifted to the left or right until it touches the edge of its container or another floated element.

/* Keyword values */
float: left; /* floats the element to the left of its container */
float: right; /* floats the element to the right of its container */
float: none; /* the element does not float */
float: inline-start; /* the equivalent of left, based on the writing-mode*/
float: inline-end; /* the equivalent of right, based on the writing-mode*/

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

Super important to note is that, an element that has float property is automatically displayed as display: block;

This two examples should more then enough, to clarify how this property works in real-life scenario

Float: left

Element is floated to the left:

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  float: left; /* observe the child div element */
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  margin-right: 16px;
  font-weight: 500;
  width: 128px;
  height: 128px;
}

<div class="container">
  <div class="box">Float</div>
  <p>This is a testing copy, placed here in order to prove a point. Rest is just a lorem ipsum: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
</div>

Float: right

Element is floated to the right:

.container {
  background: #292a2e;
  padding: 24px;
}
.box {
  float: right; /* observe the child div element */
  border: 1px dashed rgba(255,255,255,0.5);
  padding: 8px;
  margin-left: 16px;
  font-weight: 500;
  width: 128px;
  height: 128px;
}

<div class="container">
  <div class="box">Float</div>
  <p>This is a testing copy, placed here in order to prove a point. Rest is just a lorem ipsum: Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
</div>

Float property in conjunction with its ‘sister’ property clear, can be used in order to build and layout interfaces, but rise of Flexbox and CSS Grid, made such solution unpopular, due to a lot of its shortcomings in real-life implementation.

Column and Grid Systems

Column systems are used to divide a page into multiple columns and rows, making it easier to display content in an organized and readable manner. Column systems can be implemented using CSS Grid, Flexbox, or a combination of both.

When using CSS Grid, developers define a grid container and then specify the number of rows and columns they want the grid to have. They can also specify the size and behavior of each grid item within the container.

Flexbox, on the other hand, provides a more flexible and dynamic way of creating layouts. It allows developers to define a flex container and then specify how its children elements should be aligned and distributed within the container.

Both CSS Grid and Flexbox have their own strengths and weaknesses, so it’s important to choose the right one based on the requirements of the project. Regardless of which one is used, the goal remains the same: to create clean, organized, and visually appealing layouts that are easy to navigate for users.

Flexbox

Flexbox, also known as Flexible Box Layout, is a one-dimensional layout system that allows us to control the placement and alignment of elements within a container. Flexbox is especially useful for creating dynamic and responsive designs, as it can easily adjust the width and height of elements based on the size of their container. Some of the key Flexbox properties include:

1. display: Specifies the element as a flex container.
2. flex-direction: Specifies the direction of the flex container’s main axis.
3. flex-wrap: Specifies whether flex items should wrap onto multiple lines.
4. flex-flow: Shorthand property for setting both flex-direction and flex-wrap.
5. justify-content: Specifies how flex items are aligned along the main axis of the flex container.
6. align-items: Specifies how flex items are aligned along the cross axis of the flex container.
7. align-content: Specifies how multiple lines of flex items are aligned along the cross axis of the flex container.
8. flex-grow: Specifies the ability of a flex item to grow if necessary.
9. flex-shrink: Specifies the ability of a flex item to shrink if necessary.
10. flex-basis: Specifies the initial size of a flex item.
11. flex: Shorthand property for setting flex-grow, flex-shrink, and flex-basis.
12. align-self: Specifies how a single flex item is aligned along the cross axis, overriding the align-items value for the flex container.
13. order: Specifies the order in which flex items are displayed.
14. align-content: Specifies how multiple lines of flex items are aligned along the cross axis of the flex container (applies only when flex-wrap is set to wrap).

Here’s a simple example of how to use Flexbox to create a layout with three equally-spaced items:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Since you now know all properties and their application, you’re ready to work with the Flexbox using a proper tool:
https://cssgenerator.pl/en/flexbox-generator

CSS Grid

CSS Grid is a two-dimensional layout system that allows us to create rows and columns to arrange and control the placement of elements within a container. CSS Grid is especially useful for creating responsive and flexible designs, as it can easily adapt to different screen sizes and devices.

CSS Grid properties for Parent Container/s include:

1. display: Specifies the type of box an element should generate. Used to make an element a grid container.
2. grid-template-columns: Specifies the number of columns and their size for a grid container.
3. grid-template-rows: Specifies the number of rows and their size for a grid container.
4. grid-template-areas: Specifies a named grid area for a grid container.
5. grid-template: Shorthand property for specifying grid-template-columns, grid-template-rows and grid-template-areas.
6. column-gap or grid-column-gap: Specifies the size of the gap between columns for a grid container.
7. row-gap or grid-row-gap: Specifies the size of the gap between rows for a grid container.
8. gap or grid-gap: Shorthand property for specifying grid-column-gap and grid-row-gap.
9. grid-auto-columns: Specifies the size of automatically generated columns for a grid container.
10. grid-auto-rows: Specifies the size of automatically generated rows for a grid container.
11. grid-auto-flow: Specifies how grid items are positioned in a grid container.
12. justify-content: Specifies how grid items are aligned along the main axis in a grid container.
13. align-content: Specifies how grid items are aligned along the cross axis in a grid container.
14. place-content: Shorthand property for align-content and justify-content.
15. justify-items: Specifies how grid items are aligned along the main axis for individual grid items.
16. align-items: Specifies how grid items are aligned along the cross axis for individual grid items.
17. place-items: Shorthand property for specifying align-items and justify-items.
18. grid: Shorthand property for setting all properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

CSS Grid properties for Child Item/s include:

1. grid-column-start: Specifies the start grid line for an item in a grid container.
2. grid-column-end: Specifies the end grid line for an item in a grid container.
3. grid-row-start: Specifies the start grid line for an item in a grid container.
4. grid-row-end: Specifies the end grid line for an item in a grid container.
5. grid-column: Shorthand property for specifying grid-column-start and grid-column-end.
6. grid-row: Shorthand property for specifying grid-row-start and grid-row-end.
7. grid-area: Shorthand property for specifying grid-row-start, grid-column-start, grid-row-end and grid-column-end.
8. justify-self: Specifies how an item is aligned along the main axis within a grid cell.
9. align-self: Specifies how an item is aligned along the cross axis within a grid cell.
10. place-self: Shorthand property for specifying align-self and justify-self.

Here’s a simple example of how to use CSS Grid to create a layout with three equal-sized columns:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Since you now know all properties and their applications, you’re ready to work with the CSS Grid using a proper tool:
https://grid.layoutit.com