Positioning using position: absolute; and margin/padding

You can, but it will be quite inconvenient.

Example with a grid-grid:

body {
  margin: 0;
}

.parent {
  padding: 0 2vw;
  display: grid;
  grid-gap: 4vw;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.node {
  height: 30vh;
  background-color: tomato;
}

<div class="parent">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>

Same with absolute positioning:

body {
  margin: 0;
}

.node {
  --p: 2vw;
  --h: 30vh;
  position: absolute;
  
  width: calc(100% / 4 - var(--p) * 2);
  height: var(--h);
  background-color: tomato;
}

.node-1 {
  left: var(--p);
}

.node-2 {
  left: calc(100% / 4 + var(--p));
}

.node-3 {
  left: calc(100% / 2 + var(--p));
}

.node-4 {
  left: calc(100% - 100% / 4 + var(--p));
}

@media (max-width: 477px) {
  .node {
    width: calc(100% / 3 - var(--p) * 2);
  }
  
  .node-1 {
    left: var(--p);
  }

  .node-2 {
    left: calc(100% / 3 + var(--p));
  }

  .node-3 {
    left: calc(100% - 100% / 3 + var(--p));
  }
  
  .node-4 {
    left: var(--p);
    top: calc(var(--h) + var(--p) * 2);
  }
}

<div class="node node-1"></div>
<div class="node node-2"></div>
<div class="node node-3"></div>
<div class="node node-4"></div>

And I haven't finished it yet, because it's too tedious.

Absolute positioning is used in order not to interfere with the rest of the (main) elements to calmly exist and enjoy life. So, for example, position: absolute very often it is used for various decorations.

I circled the elements with absolute positioning with a red circle

margin and padding is used in order to arrange the element as you need (want) already inside some structure... or move the structure itself

ul_margin_input.addEventListener('input', (e) => {
  ul_margin_value.innerText = e.target.value
  setProperty('--um', e.target.value)
})

li_margin_input.addEventListener('input', (e) => {
  li_margin_value.innerText = e.target.value
  setProperty('--lm', e.target.value)
})

div_margin_input.addEventListener('input', (e) => {
  div_margin_value.innerText = e.target.value
  setProperty('--dm', e.target.value)
})

ul_padding_input.addEventListener('input', (e) => {
  ul_padding_value.innerText = e.target.value
  setProperty('--up', e.target.value)
})

li_padding_input.addEventListener('input', (e) => {
  li_padding_value.innerText = e.target.value
  setProperty('--lp', e.target.value)
})

div_padding_input.addEventListener('input', (e) => {
  div_padding_value.innerText = e.target.value
  setProperty('--dp', e.target.value)
})

function setProperty(p, v) {
  ul.style.setProperty(p, v + 'px')
}

* {
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #6e5773;
  color: #e9e1cc;
}

ul {
  margin-left: var(--um);
  padding-left: var(--up);
  width: 100%;
  height: 50vh;
  display: flex;
  list-style: none;
  background-color: #d45079;
}

li {
  flex-grow: 1;
  margin-left: var(--lm);
  padding-left: var(--lp);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ea9085;
}

div {
  margin-left: var(--dm);
  padding-left: var(--dp);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 60%;
  height: 60%;
  background-color: #e9e1cc;
  color: #6e5773;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */

.inputs {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-around;
}

.inputs_1 {
  top: 0;
  left: 0;
}

.inputs_2 {
  bottom: 0;
  left: 0;
}

.info {
  position: absolute;
  top: 15%;
  left: 0;
  display: flex;
}

.info>p {
  margin-right: 10px;
}

.info>p>span {
  display: inline-block;
  width: 15px;
  height: 15px;
}

.info>p:nth-child(1)>span {
  background-color: #d45079;
}

.info>p:nth-child(2)>span {
  background-color: #ea9085;
}

.info>p:nth-child(3)>span {
  background-color: #e9e1cc;
}

<ul id="ul" style="--um: 0; --up: 0; --lm: 0; --lp: 0; --dm: 0; --dp: 0">
  <li>
    <div>Lorem ipsum dolor sit amet.</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet.</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet.</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet.</div>
  </li>
</ul>

<!-- ~~~~~~~~~~~~~~ -->
<aside class="inputs inputs_1">
  <label>
    <p>ul margin: <span id="ul_margin_value">0</span></p>
    <input type="range" id="ul_margin_input" value="0">
  </label>
  <label>
    <p>li margin: <span id="li_margin_value">0</span></p>
    <input type="range" id="li_margin_input" value="0">
  </label>

  <label>
    <p>div margin: <span id="div_margin_value">0</span></p>
    <input type="range" id="div_margin_input" value="0">
  </label>
</aside>

<aside class="inputs inputs_2">
  <label>
    <p>ul padding: <span id="ul_padding_value">0</span></p>
    <input type="range" id="ul_padding_input" value="0">
  </label>

  <label>
    <p>li padding: <span id="li_padding_value">0</span></p>
    <input type="range" id="li_padding_input" value="0">
  </label>

  <label>
    <p>div padding: <span id="div_padding_value">0</span></p>
    <input type="range" id="div_padding_input" value="0">
  </label>
</aside>

<aside class="info">
  <p>ul: <span></span></p>
  <p>li: <span></span></p>
  <p>div: <span></span></p>
  <p>всё тоже самое применимо и к другим сторонам</p>
</aside>