Семантический интерфейс UI - ui лучший подход для макета (строки/столбцы против сегментов)

Я новичок в Semantic UI, и я пытаюсь создать веб-страницу с макетом ниже. Если посмотреть на документацию, я решил использовать ui page grid. Я также решил определить верхнее фиксированное меню вне сетки.

enter image description here

Мой первый подход был примерно таким:

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="row"> Left column, row 1</div>
                <div class="row"> Left column, row 2</div>
                <div class="row"> Left column, row 3</div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

Мой вопрос:

Правильно ли он подходит для создания макета, подобного изображению? Должен ли я использовать segments для разделения содержимого вместо строк или столбцов?

Заранее благодарю вас!

Ответы

Ответ 1

Семантический пользовательский интерфейс хотел, чтобы segments означал части текста/статьи. Они оставили небольшую заметку:

Сегмент используется для создания группировки связанного содержимого. горизонтальный сегменты наиболее эффективно используются с сетками, чтобы обеспечить текст группы, которые выровнены по сетке.

В сущности, они означают, что grid является основой вашей разметки. grid был разработан для размещения страницы.

Вы можете использовать segments в своей сетке для группировки аналогичного контента. (Если вы больше смотрите в документах, вы можете увидеть это намерение, где у них есть классы stacked, piled, loading для segments.)

Например, я хотел бы, чтобы три ячейки в левом нижнем углу были чем-то вроде ленты новостей. Тогда я бы использовал сегменты:

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="ui segment">
                    <div class="ui vertical segment">
                        <p>Left column, row 1</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 2</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 3</p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

Grid with segments