CODEWITHSUNDEEP
htmlcssgridsemantic-ui
hans meyer
hans meyer

Reputation: 101

Building a simple responsive grid

I'm fairly new to semantic-ui. This is probably a pretty stupid question.

I'm struggling with creating a five column grid layout that is responsive/mobile friendly. Here's a quick image that shows what I am trying to do. Also, sorry for my sick MS Paint skills:

Computer: Computer

Mobile:

Mobile

Any ideas? :)

Upvotes: 0

Views: 1082

Answers (4)

Robert Blansett
Robert Blansett

Reputation: 91

I have an "index.html" and a "style.css" to accomplish this. The html looks like this (call it "index.html"):

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="utf-8">
        <meta name="description" content="grid example for StackOverflow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>  Grid Example - by Rob Blansett.
        </title>
    </head>
    <body>
        <div class="Container">
             <p>Container: Content should be horizontally centered.</p>
             <div class="Row" id="One">
                Row #1
             </div>
             <div class="Row" id="Two">
                Row #2
                 <div class="Segment">
                    <div class="SegmentText">
                        Segment
                    </div>
                    <div class="Item" id="Item1">
                         Item #1
                    </div>
                    <div class="Item" id="Item2">
                         Item #2
                    </div>
                    <div class="Item" id="Item3">
                         Item #3
                    </div>
                    <div class="Item" id="Item4">
                         Item #4
                    </div>
                    <div class="Item" id="Item5">
                         Item #5
                    </div>
                 </div>

             </div>
             <div class="Row" id="etc">
                Row ...
             </div>
        </div>
    </body>
</html>

And the "style.css" looks like this: 

* {
    padding: 0;
    margin: 0;
}

div {
    display: block;
    padding: 1em; 
    margin: 1em;
    border-style: solid;
    position: relative;
}

div.Container {
    margin-left: 2%;
    margin-right: 2%
}

div.Row {
    background-color: grey;
}

div.Segment {
    background-color: lightgrey;
}

div.SegmentText {
    border-style: none;
} 

div.Item {
    background-color: darkgray;
}

/* If at least 500 pixels width is available then: */
@media (min-width:500px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 10%;
        margin-right: 10%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 4;
        border-style: none;
    } 
}

/* If at least 800 pixels width is available then: */
@media (min-width:800px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 20%;
        margin-right: 20%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 6; 
        border-style: none;
    } 
}

Note that I've included @media queries for the window width. The default style set up is at the top of the CSS, then below that are the query sections that do the GRID stuff if there is a wide-enough window. So, it will be the one column if less than 500 pixels are available, and it will be 5 columns if at least 800 pixels are available. I included an intermediate size with 3 columns - just for fun. Re-size the window and see the adjustment between styles in action.

Here's link to working a copy: http://technifusion.com/projects/web/grid-example-01.html

This just gives an idea of how it can be done.

Note: This solution does not use semantic-ui (that the original poster asked for) but this solution may still help people who are not using that framework.

Upvotes: 0

ihpar
ihpar

Reputation: 676

The outer container is straightforward I think. For the Segment which has 5 items in it, you can use something like:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet" />

<div class="ui container">

  <div class="ui one column centered grid">

    <div class="center aligned column" style="background-color: #B0C4DE;">
      Some Row
    </div>

    <div class="column">
      <div class="ui stackable five column grid">
        <div class="column" style="background-color: #FFF8DC;">Item 1</div>
        <div class="column" style="background-color: #F8F8FF;">Item 2</div>
        <div class="column" style="background-color: #FFF8DC;">Item 3</div>
        <div class="column" style="background-color: #F8F8FF;">Item 4</div>
        <div class="column" style="background-color: #FFF8DC;">Item 5</div>
      </div>
    </div>

    <div class="column" style="background-color: #E0FFFF;">
      New Row
    </div>

  </div>

</div>

The grid is your friend https://semantic-ui.com/collections/grid.html

Upvotes: 1

SD3L
SD3L

Reputation: 171

I think you forgot one of the best part on Semantic UI.

https://semantic-ui.com/views/item.html

Responsive Element Item views are designed to be responsive with images stacking at mobile resolutions.

You just have to put your item elements on a ui items, and it's will works. Looks here : 

<div class="ui items">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
</div>

Using grids is cool, but you already have responsive element :)

Peace

Upvotes: 1

Jonathan Ramos
Jonathan Ramos

Reputation: 2161

I know you want to use semantic-ui but if you don't mind, you create your layout with bootstrap4 too.

Bootstrap4 methodology is mobile first, so create your html structure to adapt mobile and then grow from there.

Bootstrap use a grid system based on rows of 12 columns. You define the space taken for each column using the class col-x for mobile, col-md-x for medium width window, col-lg-x for large. "x" defines the number of columns (x<=12) taken by the div element. Check the Bootstrap4 documentation.

Remember to add the related js libraries and css to your html file.

Check this snippet:

#row-1{
  background-color: orange;
}
#row-2{
  background-color: yellow;
}
#row-3{
  background-color: lightblue;
}
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>

<div class="container">
  <div id="row-1" class="row">
    <div class="col-12">
      Row #1
    </div>
  </div>
  <div id="row-2" class="row">
    <div class="col-12 col-md-2">
      Item 1
    </div>
    <div class="col-12 col-md-2">
      Item 2
    </div>
    <div class="col-12 col-md-2">
      Item 3
    </div>
    <div class="col-12 col-md-2">
      Item 4
    </div>
    <div class="col-12 col-md-2">
      Item 5
    </div>
    <div class="col-12 col-md-2">
      Item 6
    </div>
  </div>
  <div id="row-3" class="row">
    <div class="col-12">
      Row #3
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Upvotes: 0

Related Questions