CODEWITHSUNDEEP
semantic-ui
softlyspoken
softlyspoken

Reputation: 173

Grid Column Height

Is there a way to get columns in one row to be the same size? I want my ten wide column to be the same height as the six wide column. Code below.

<div class="ui grid">
    <div class="row">
        <div class="ten wide column">
            <div class="ui segment purple inverted">
                Text
                <img class="ui fluid image" src="{{ asset('/img/pic1.jpg') }}">
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment purple inverted">
                Text
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic2.jpg') }}">
                </div>
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic3.jpg') }}">
                </div>
            </div>
        </div>
     </div>
</div>

Upvotes: 1

Views: 2935

Answers (2)

Sarup Banskota
Sarup Banskota

Reputation: 91

Semantic 2.0 onwards this is stretched.

<div class="ui three column stretched grid">
 <div class='column'>
   A
 </div> 
 <div class='column'>
   B
 </div> 
 <div class='column'>
   C
 </div> 
</div>

Upvotes: 5

Jan
Jan

Reputation: 2779

Like with Equal Width Columns you can use the equal height grid to achieve this:

<div class="ui equal height grid">
    <div class="row">
        <div class="ten wide purple column">Text</div>
        <div class="six wide red column">
            <div class="row">Text</div>
            <div class="row">Text</div>
            <div class="row">Text</div>
            <div class="row">Text</div>
        </div>
    </div>
</div>

http://jsfiddle.net/pq1oka3n/1/

Upvotes: 0

Related Questions