CODEWITHSUNDEEP
htmlcssresponsive-designgrid-layout
user3668869
user3668869

Reputation: 53

Responsive 4 box grid from two to one columns

I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.

I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.

Here is a sketch of the responsive grid:

responsive grid from two to one columns

Upvotes: 5

Views: 7958

Answers (3)

web-tiki
web-tiki

Reputation: 103780

Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :

DEMO (resize the result window to see the effect)

Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.

When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.

#container {
  text-align: center;
  max-width: 450px;
  margin: 0 auto;
}
.block {
  width: 200px;
  height: 200px;
  margin: 10px;
  display: inline-block;
  background: #00CC99;
}
<div id="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

Upvotes: 9

tgbrunet
tgbrunet

Reputation: 260

Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want). Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.

I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.

Upvotes: 0

lhan
lhan

Reputation: 4635

You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.

Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.

<div class="row">
    <div class="col-sm-2 col-sm-offset-3 col-xs-12">
        <div class="block">1</div>
    </div>
    <div class="col-sm-3 col-xs-12">
        <div class="block">2</div>
    </div>
    <div class="col-sm-2 col-sm-offset-3 col-xs-12">
        <div class="block">3</div>
    </div>
    <div class="col-sm-3 col-xs-12">
        <div class="block">4</div>
    </div>
</div>

In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.

Hopefully this helps!

Upvotes: 2

Related Questions