chrome/browser/resources/tab_strip/tab_list.html

<style>
  :host {
    --tabstrip-tab-height: calc(var(--tabstrip-tab-title-height) +
                                var(--tabstrip-tab-thumbnail-height));
    --tabstrip-tab-width: var(--tabstrip-tab-thumbnail-width);
    --tabstrip-tab-spacing: 16px;
    --tabstrip-tab-dragging-shadow:
        0 2px 3px 0 rgba(var(--google-grey-800-rgb), .3),
        0 6px 10px 4px rgba(var(--google-grey-800-rgb), .15);

<if expr="not chromeos">
    --tabstrip-tab-drag-image-scale: 1.1;
</if>
<if expr="chromeos">
    /* ChromeOS scales drag images by 1.2, so this variable multiplied by
     * 1.2 should be around 1.1. */
    --tabstrip-tab-drag-image-scale: calc(1.1 / 1.2);
</if>

    background: var(--tabstrip-background-color);
    box-sizing: border-box;
    display: flex;
    height: 100%;
    overflow: overlay hidden;
    touch-action: pan-x;
    width: 100%;
  }

  #tabs {
    display: flex;
    min-width: fit-content;
    overflow: hidden;
    width: 100%;
  }

  #pinnedTabs {
    /* 3 pinned tabs should fit in the same space vertically as 1 unpinned
     * tab. 20px is subtracted from the height of an unpinned tab as there
     * are two 10px gaps to separate each of the 3 pinned tabs. */
    --tabstrip-pinned-tab-size: calc((var(--tabstrip-tab-height) - 20px) / 3);
    --tabstrip-tab-spacing: 10px;

    display: grid;
    grid-auto-columns: var(--tabstrip-pinned-tab-size);
    grid-auto-flow: column;
    grid-gap: var(--tabstrip-tab-spacing);
    grid-template-rows: repeat(3, var(--tabstrip-pinned-tab-size));
    padding-block-end: var(--tabstrip-tab-list-vertical-padding);
    padding-block-start: var(--tabstrip-tab-list-vertical-padding);
    padding-inline-end: 0;
    padding-inline-start: var(--tabstrip-tab-spacing);
  }

  #pinnedTabs:empty {
    display: none;
  }

  #unpinnedTabs {
    display: flex;
    min-width: fit-content;
    padding-block-end: var(--tabstrip-tab-list-vertical-padding);
    padding-block-start: var(--tabstrip-tab-list-vertical-padding);
    padding-inline-end: 0;
    padding-inline-start: var(--tabstrip-tab-spacing);
  }

  tabstrip-tab-group {
    --tabstrip-tab-spacing: 8px;
  }

  tabstrip-tab-group:not([dragging]) {
    margin-block-end: calc(-1 * var(--tabstrip-tab-spacing));
    margin-block-start: calc(-1 * var(--tabstrip-tab-spacing));
    margin-inline-end: var(--tabstrip-tab-spacing);
    margin-inline-start: 0;
  }

  tabstrip-tab-group tabstrip-tab:last-child {
    --tabstrip-tab-spacing: 0px;
  }

  tabstrip-tab + tabstrip-tab-group:not([dragging]) {
    margin-inline-start: calc(-1 * var(--tabstrip-tab-spacing));
  }

  tabstrip-tab-group[dragging] {
    margin-block-end: 0;
    margin-block-start: 0;
    margin-inline-end: 16px;
    margin-inline-start: 0;
  }

  #dropPlaceholder {
    background: var(--tabstrip-tab-background-color);
    border-radius: var(--tabstrip-tab-border-radius);
    height: var(--tabstrip-tab-height);
    margin-inline-end: var(--tabstrip-tab-spacing);
    opacity: 0.5;
    width: var(--tabstrip-tab-width);
  }
</style>

<div id="tabs">
  <div id="pinnedTabs"></div>
  <div id="unpinnedTabs"></div>
</div>