JSFiddle - React, Tailwind, and code Playground

HTML

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

<div style="clear: both; height: 10px;">

</div>

<ul class="menu">
    <li class="menu__item"><a href="" class="menu__link">Раз</a></li>
    <li class="menu__item"><a href="" class="menu__link">Два слова</a></li>
    <li class="menu__item"><a href="" class="menu__link">Это</a></li>
    <li class="menu__item"><a href="" class="menu__link">Просто</a></li>    
    <li class="menu__item"><a href="" class="menu__link">Пример</a></li>
</ul>

<div style="height: 20px;">

</div>

<div class="grid__row">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.menu {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */
    
    width: 100%;
}
.menu-item {
  display: flex;
  border: 1px solid green;
  border-top: none;
  //width: 16.66666666666667%;
  box-sizing: border-box;
  height: 40px;
  justify-content: center;
  /* align horizontal */
  align-items: center;
}


/* Пример для CSS-live.ru */

body { min-width: 500px; } ul, li { margin: 0; padding: 0; }

.menu{
    background: #666;
    display: -webkit-box; /* Android 4.3-, Safari без оптимизации */
    -webkit-box-pack: justify; /* Android 4.3-, Safari без оптимизации */
    display: -webkit-flex; /* оптимизация для Safari */
    -webkit-justify-content: space-between; /* оптимизация для Safari */
    display: flex;
    justify-content: space-between;
	text-align: justify; /* IE10-, Firefox 12-22 */
	text-align-last: justify; /* IE10-, Firefox 12-22 */
    /*text-justify: newspaper; /* IE7- */
    /*zoom: 1; /* IE7- */
}

.menu__item{
    display: inline-block;    
    display: -webkit-box;
    text-align: left;
    padding: 10px 0;
    border: 1px solid #ccc;
    /*display: inline;  /* IE7- */
    /*zoom: 1; /* IE7- */
}

.menu__link{
    font-family: Arial;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}


.grid__row {
     display: flex;
    /*justify-content: center;
      align-items: center; */
}
.grid__item {
  display: flex;
  flex: 1 1 0;
  border-right: 1px solid green;
  box-sizing: border-box;
  height: 40px;
  
  justify-content: center;
  /* align horizontal */
  align-items: center;
}
.grid__item:last-child {
  border-right: none;
}