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>
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>
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/
Related
I am learning Semantic UI Grid these days. It's pretty cool to use, but I am having some issues with the grids. Below I created two different grids, but I don't understand why there is no spacing between the two grids and I can't figure out how to add the spacing between them (without me adding some new css). Is there a class to add to the grids to have the spacing that I want?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui container">
<div class="ui equal width padded grid">
<div class="ui row">
<div class="ui black column"></div>
<div class="ui red column"></div>
</div>
</div>
<div class="ui padded grid">
<div class="ui blue row">
<div class="ui column">Single Row</div>
</div>
<div class="ui yellow equal width row">
<div class="ui green column">1</div>
<div class="ui column">2</div>
<div class="ui red column">3</div>
</div>
<div class="ui three column row">
<div class="ui pink left floated column">LEFT</div>
<div class="ui pink right floated column">RIGHT</div>
</div>
</div>
</div>
I think there is a trouble using color with 'padded' grid. I couldn't found any SUI option, but maybe nested grid is a temporary solution.
http://semantic-ui.com/collections/grid.html#/overview
Colored Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui container">
<div class="ui equal width padded grid">
<div class="ui row">
<div class="ui black column"></div>
<div class="ui red column"></div>
</div>
</div>
<div class="ui grid">
<div class="ui row">
<div class="ui column">
<div class="ui padded grid">
<div class="ui blue row">
<div class="ui column">Single Row</div>
</div>
</div>
</div>
</div>
<div class="ui equal width row">
<div class="ui column">
<div class="ui padded grid">
<div class="ui green row">
<div class="ui column">1</div>
</div>
</div>
</div>
<div class="ui column">
<div class="ui padded grid">
<div class="ui yellow row">
<div class="ui column">2</div>
</div>
</div>
</div>
<div class="ui column">
<div class="ui padded grid">
<div class="ui red row">
<div class="ui column">3</div>
</div>
</div>
</div>
</div>
<div class="ui three column row">
<div class="ui left floated column">
<div class="ui padded grid">
<div class="ui pink row">
<div class="ui column">LEFT</div>
</div>
</div>
</div>
<div class="ui right floated column">
<div class="ui padded grid">
<div class="ui pink row">
<div class="ui column">LEFT</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is the starting point:
http://www.bootply.com/r88hL82f3m
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1">Div1 Div2</div>
</div>
</div>
</div>
I need Div1 and Div2 to split into two rows only for small screen and extra-small screen, meaning Div1 occupies first row and Div2 occupies second row.
While below bootply may look like a solution, it does not work because I don't want Div1 and Div2 to split up into columns on medium screen upwards - I want them to stay in one column on medium, large and extra-large screen.
http://www.bootply.com/RkxKSdYZ2F
Use visible-* and hidden-* classes to use two different containers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 visible-xs visible-sm">
<div class="id1">Div1</div>
<div class="id2">Div2</div>
</div>
<div class="col-xs-12 hidden-xs hidden-sm">
<div class="id1">Div1 Div2</div>
</div>
</div>
</div>
This isn't very need, but it does the trick
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1" class="visible-md visible-lg col-md-12">Div1 Div2</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div1</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div2</div>
</div>
</div>
</div>
bootply
I am using Semantic UI, and when trying to separate a <div>, I can get the elements fit in (like the screenshot below):
Here is the code:
<div class="ui four column grid">
<div class="column">
<div class="ui segment">
<div class="ui top left attached label">Saturday</div>
<div class="ui two column grid">
<div class="column">
<div class="two column"><i class="sunn"></i><i class="cloud"></i></div>
</div>
<div class="column">
<div class="ui statistic">
<div class="label">Sun raises</div>
<div class="value">06:46</div>
</div>
</div>
</div>
</div>
</div>
here is a fork:
http://jsfiddle.net/0djhjpym/
Tried to use this but it is aligning the content too.
<div class="center aligned ui grid">
<div class="ten wide column">
<h2 class="ui header">
Your Blog
<div class="sub header">A blog application implemented with Semantin-UI/SpringBoot/MongoDB/.</div>
</h2>
<div class="ui divided list" th:each="post : ${posts}">
<div class="item">
<div class="content">
<a class="header" th:text="${post.title}">Title</a>
<div id="blogId" th:text="${post.id}" style="display: none">Id</div>
<div class="description" th:text="${post.content}">Content</div>
<div class="ui divider"></div>
</div>
</div>
</div>
NewPost
</div>
</div>
Just add left aligned to your inner column <div>:
<div class="center aligned ui grid">
<div class="ten wide left aligned column">
...
</div>
</div>
Source: http://semantic-ui.com/collections/grid.html#specifying-alignment
I am really struggling with getting 3 columns inside a page layout.
I am only using the semantic CSS, no CSS of my own for now. I am just trying to wrap my head around the grid stuff.
This is my complete body content:
<div class="ui page grid">
<header class="sixteen wide column">
<div class="ui segment">Header text.</div>
</header>
<div class="ui divided grid">
<div class="eight wide column">
<div class="ui segment">Left text</div>
</div>
<div class="eight wide column">
<div class="ui segment">Right text</div>
</div>
</div>
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
<footer class="sixteen wide column">
<div class="ui segment">Footer text.</div>
</footer>
</div>
I understand how to get a full width column — that's verbose but it works.
I also am able to get 2 half-width columns using .sixteen.wide.column elements.
But since 16 is not dividable by 3, I am trying to use this to obtain 3 columns:
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
That code above is lifted from this documentation page: http://semantic-ui.com/collections/grid.html
I get this, alas:
It seems that the width issue comes from this CSS:
.ui.grid > .column, .ui.grid > .row > .column {
width: 6.25%;
}
No I need an additional class anywhere, or some additional markup?
Thank you so much!
Here you go:
<div class="ui three column grid">
<div class="column">
Content
</div>
<div class="column">
Content
</div>
<div class="column">
Content
</div>
</div>
I had a similar problem!
Its done this way:
<div class="ui divided grid stackable">
<div class="three column row">
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
</div>
</div>