I need a masonry grid like this:
Is this possibile to achieve that using flexbox only? Or any other way?
Don't want to use Masonry library or other library or framework.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4 ">
</div>
<div style="clear:both;"></div>
</div>
</div>
</section>
</body>
</html>
I believe CSS grid would be your friend here.
CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns. CSS Grid can be used to achieve many different layouts. It excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn't have content structure, therefore enabling a wide variety of layouts not possible in tables.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Here's a fun and simple game to help you learn and understand CSS grids.
http://cssgridgarden.com/
Related
I have an issue with WordPress website in mobile responsive. I have multiple sections with the below arrangement.
Left side content and right side image ( First Section )
Right Side Image and Left side content ( Second Section )
In the mobile version sections going in the same arrangement (Content -> Image | Image -> Content).
But I want arrangement should be quite opposite for the second section in mobile view.
Image -> Content | Image -> content
I want a layout like this in mobile:
Layout in desktop version:
How can I fix this issue?
Either you can use bootstrap grid system for those div or use a media query for them specifically for the mobile devices.
I guess grid system would be easy.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
First columns
</div>
<div class="col-sm-6 col-md-6">
Second columns
</div>
<div class="col-sm-6 col-md-6">
Third columns
</div>
<div class="col-sm-6 col-md-6">
Fourth columns
</div>
</div>
You can use the concept of bootstrap push and pull. Please check the following code and output or check my codepen.
.box {
background: #fff000;
margin: 10px 0;
height: 200px;
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6"><div class="box">Image</div></div>
<div class="col-md-6 pull-md-6"><div class="box">Content</div></div>
<div class="col-md-6"><div class="box">Image</div></div>
<div class="col-md-6"><div class="box">Content</div></div>
</div>
</div>
</body>
</html>
I don't know if I'm wrong but it used to be that if you had bootstrap-columns that added to more than 12 (default value) the rest would drop to a new "row". I'm now using Bootstrap 3.x So in theory having this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
Would be essentially the same as having this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
<div class="row"> <!-- This would seem to 'drop' into a new row -->
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
I'm using AngularJS v1.3.x to create multiple columns of 4 expecting them to be align in different rows:
<div class="row">
<div class="col-xs-4" ng-repeat="item in ['Lorem Ipsum..', 1, 2, 3...]">{{item}}</div>
</div>
but as the height of each column differs (i.e. 'Lorem Ipsum..' and single numbers). You can see what happens in this plunker. Instead of having the next 12 drop to a new row, they "overlap" somehow, making it look good UNTIL there is a gap. What I want is to actually drop to a new row every 12.
Is this happening for any specific reason? And how can I use Angular in a way to add a row every total of 12 (3 x col-xs-4 = 12). As extra information: the array is dynamic, it will never hold the same amount of items at one time, meaning that I can't hard code it.
Any ideas are greatly appreciated, thanks!
Responsive column resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
Basically, it comes down to how floats work in CSS/HTML, in particular when the items being floated are of differing heights. And Bootstrap's grid is implemented using floats, so this floating issue affects it.
Example for your particular case:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="clearfix"></div>
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
</div>
Just trying to create simple template, but dont know why text going out of div. here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
#include('qhymchildz.includes.head')
</head>
<body>
<div id="container">
<div id="header" class="panel">
ini headersssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div id="main" class="row">
<div id="content" class="medium-10 columns panel">
<p>contentssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
<div id="sidebar" align="left" class="medium-2 columns panel">
<p>salfjasjf;lajfja;jsfl;;asjf;lawoierwruowirowuriowrowrowurioweruiowrowerowurowuriowrowrowuroirour</p>
</div>
</div>
<div id="footer" class="panel">
ini footer
</div>
</div>
</body>
</html>
and here is the result
http://prntscr.com/5nwn5l
How to fix it ?
Thanks in advance.
Sorry as i cannot comment due to low reputation but is it possible to see your CSS code used as that would help alot.
At first sight it could be fixed by using word-wrap: break-word since you are using a solid line of text rather than that of one with spaces. if not that it may be an overflow-x issue. it may also be that if you are using a grid template as would be suggested by columns and rows, it may be an issue with that code that affects how the long string of text responds to lack of room.
Try breaking up that text into real words or some Lorem Ipsum
Really i would need to see your CSS, thanks.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->
I want my site to be fluid/responsive to whatever device the user has; I reckon more often than not it will be a cell "phone," but I am developing on a laptop, so there's a mismatch between what I see at design time and what most users will see. Of course, I can run emulators/simulators, etc. But my point is that I want the site to automatically adjust to the size/aspect ratio/orientation the device at any given moment. From what I've read, the easiest way to accomplish this is to leverage Twitter Bootstraps capabilities by referencing their CSS file and adding a few class declarations to various tags in my html. I'm wondering just where I need to add these.
I've added the bootstrap css:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
My _SiteLayout.cshtml (Razor 2 webiste) file came structured this way (showing just the body, head decapitated):
<body>
<div id="fb-root"></div>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body" >
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
</p>
</div>
</div>
</footer>
</body>
So it uses "content-wrapper" on the outher divs and then floats inner tags left and right. Does this obviate the need for Twitter Bootstrap? Is the same sort of responsive design baked into this Razor 2 structure already?
If not, in which tags should I put the Twitter Bootstrap class declarations?
Should I add class="row-fluid" to some of these tags and, if so, which ones?
The basic fluid grid scaffolding of Twitter Bootstrap is laid out as .container-fluid > .row-fluid > .span#. Spans within .row-fluid use percentage widths conducive of layouts consisting of elements that add up to 12: .span1, .span2, .span3 etc..
Span classes are already set to float:left which can be overridden by adding .pull-right to float:right elements.
So Bootstrap implementation with your layout could look something like:
<body>
<div id="fb-root"></div>
<header class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span6">
<p class="site-title">
</p>
</div>
<div class="span6 pull-right">
</div>
</div>
</header>
<div class="container-fluid" id="body">
#RenderSection("featured", required: false)
<section class="row-fluid content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span12">
<p>
</p>
</div>
</div>
</footer>
</body>
Take a look at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem