theuves

.grid {
  display: grid;
  grid-template-columns: 100px 200px 300px;
}

theuves

.page {  
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'  
    'menu footer footer footer footer footer';
}

.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }

theuves

<div class="page">
  <div class="item header">Header</div>
  <div class="item menu">Menu</div>
  <div class="item main">Main</div>
  <div class="item right">Right</div>
  <div class="item footer">Footer</div>
</div>

theuves

.item.item-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

theuves

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

theuves

.grid {
  display: grid;
}

theuves

<div class="grid">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
</div>

theuves

const calcHyp = (leg) => Math.sqrt(leg ** 2 * 2)

theuves

const formatNumber = (str) => Array.from(str).map((val, i, arr) => ((arr.length - i) % 6 - 1) % 3 === 0 && i !== arr.length - 1 ? `${val}.` : val).join('')

theuves

[
  parseInt(42.25, 0), // 42.25 = item e 0 = índice
  parseInt(42.5, 1), // 42.5 = item e 1 = índice
  parseInt(42.75, 2) // 42.75 = item e 2 = índice
]