CODEWITHSUNDEEP
htmlcsssemantic-ui
CoderPJ
CoderPJ

Reputation: 1011

Semantic UI Segments

How to code this segment in Semantic UI?

How to code this segment in Semantic UI? I tried using grids too, but it unfortunately didn't work out.

<div class="ui horizontal segments">

            <div class="ui segment">
                <div class="two column row">
                    <div class="column">

                    </div>
                    <div class="column">

                    </div>
                </div>
            </div>
            <div class="ui segment">

            </div>
</div>

Upvotes: 0

Views: 1735

Answers (2)

Venkata Sandeep
Venkata Sandeep

Reputation: 191

I think with some css and Semantic segments, you can achieve this. Here's what I tried. Apologies for indentation!

<div class="ui segments" style="width: 400px;float: left;">

<div class="ui compact horizontal segments">
<div class="ui segment" style="width: 100px;padding: 0;border-radius: 0px;">
    <div class="ui segments" style="width: 200px;float: left;border: 0px;border-radius: 0px;border-right: 1px solid #eee;">
<div class="ui segment" style="border-bottom: 1px solid #eee !important;">
  <p>Nested Top</p>
</div>
<div class="ui segment" style="border-bottom: 1px solid #eee!important; ">
  <p>Nested Middle</p>
</div>
<div class="ui segment">
  <p>Nested Bottom</p>
</div>
</div>
</div><div class="ui segment" style="width: 99px;background: #fff;"><p>Nested Horizontal</p> </div></div></div>

Upvotes: 0

Zooly
Zooly

Reputation: 4787

I think this Plunkr fits with what you're looking for

<div class="ui grid">
    <!-- left part --> 
    <div class="eight wide column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <!-- right part -->
    <div class="eight wide column"></div>
</div>

Grid separated on two wide equal columns. On the right column, three rows, on the left column, your content.

Upvotes: 1

Related Questions