отображать сетку пустой div в качестве проставки?

Question

Создание панели навигации, которая будет выглядеть примерно так:

|----------------------------------------------------------|
|                  link     Logo     link            link  |
|----------------------------------------------------------|

Мой мыслительный процесс для создания этого макета заключается в создании структуры html, которая выглядит следующим образом:

<nav>
  <div></div>
  <div>
    link
    logo
    link
  </div>
  <div>
    link
  </div>
</nav>

а затем с CSS я бы сделал что-то вроде:

display: grid;
grid-template-columns: 200px auto 200px;
...

Мой вопрос здесь: есть ли лучший способ воссоздать этот макет? Мне не нравится, как я использую пустой div для создания пространства.

Я знаю, что могу удалить пустой div и поместить что-то вроде margin-left: 200px во 2-й div, но это тоже выглядит довольно нахально.

Оцените ввод.

Answer 1

По комментариям к исходному вопросу я смог найти свойство grid-column-start, и это было именно то, что мне было нужно. Я ценю, что все комментируют, но я чувствую, что те, кто говорит использовать библиотеку / фреймворки для построения панели навигации, излишни. Знание того, как на самом деле создать эти макеты, делает вас лучшим разработчиком.

Это то, что я в итоге сделал:

<div class="navbar">
    <div class="navbar--content">
        <div class="navbar--content--middle">
            <div class='row row__align-center row__center'>
                <a href="#">shop now</a>
                <a href="#">logo</a>
                <a href="#">FAQ</a>
               </div>
        </div>
        <div class="navbar--content--right">
            <a href="#">user img</a>
            <a href="#">bag</a>
        </div>
    </div>
</div>

И css:

.navbar {

    &--content {
        padding: 20px 0;

        display: grid;
        grid-template-columns: 200px auto 200px;
        align-items: center;

        &--middle {
            grid-column-start: 2;

            a {
                width: 100px;
                text-decoration: none;
                font-weight: 600;

                &:first-child {
                    margin-right: 100px;
                }

                &:nth-child(2) {
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: center; 
                }

                &:last-child {
                    margin-left: 100px;
                }
            }
        }

        &--right {
            text-align: right;

            a {
                &:first-child img {
                    height: 30px;
                    margin-right: 10px; 
                }

                &:last-child img {
                    height: 35px;
                }
            }
        }
    }
}

Answer 2

Вот базовая c реализация, основанная на вашем коде. В основном это комбинация CSS Grid Layout и Flexible Box Layout .

Внутри основного <nav> контейнера используйте grid-template-columns для распределения доступной ширины, используя fr единица. Затем используйте flexbox для размещения содержимого внутри каждого из контейнеров <div>:

nav {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.links-and-logo,
.just-link {
  display: flex;
  justify-content: flex-end;
}

<nav>
  <div class="links-and-logo">
    <a href="#">Link</a>
    <img src="https://source.unsplash.com/100x100/?technology" alt="Nature">
    <a href="#">Link</a>
  </div>
  <div class="just-link">
    <a href="#">Link</a>
  </div>
</nav>

Answer 3

Это хитрый дизайн. Вы должны использовать множественную концепцию CSS для достижения этой схемы, например, псевдо и абсолютное положение вам помогут. Вы можете проверить с другим фреймворком, но опять же, в соответствии с вашим дизайном, вам нужно написать собственный CSS в соответствии с ограничением. Я написал оптимизированную CSS & разметку этого дизайна для вас, используя псевдоэлементы и «position: absolute» для четвертого div. Пожалуйста, попробуйте код (вы можете изменить ширину nav в соответствии с вашими требованиями) и дайте мне знать, если вам нужна дополнительная информация или какие-либо вопросы. Заранее спасибо.

nav {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;   
        position: relative;
        border-top: .05em #000 dashed;
        border-bottom: .05em #000 dashed; 
      }

      nav .lft-rgt-seperator {
        position: absolute;
        width: 103%;
        height: 14px;
        border-top:4px solid #fff;
        border-bottom:4px solid #fff;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 2;
      }


      nav:before {
        content:"";
        width:.05em;
        height: 49px;
        position: absolute;
        top: -6px;
        left: -4px;
        background: #000;
      }

      nav:after {
        content:"";
        width:.05em;
        height: 49px;
        position: absolute;
        top:-6px;
        right:-4px;
        background: #000;
      }

      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        z-index: 4;
      }

      nav ul li {
        margin: 8px 15px;
      }

      nav ul li a, nav .lftlink a {
        color: #000;
        text-decoration: none;
        font-size:18px;
        cursor: pointer
      }

      nav ul li a:hover, nav .lftlink a:hover {        
        text-decoration: underline;
      }

      nav .lftlink {
        position: absolute;
        right:20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 5;
      }

<nav>     
      <div class="lft-rgt-seperator">
      </div>

        <ul>
          <li>
            <a href="#" title="Link">Link</a>
          </li>
          <li>
            <a href="#" title="Logo">Logo</a>
          </li>
          <li>
            <a href="#" title="Link">Link</a>
          </li>    
        </ul>

        <div class="lftlink">
            <a href="#" title="Link">Link</a>
        </div>
    </nav>