PocketGrid is really lightweight, so you can use it in all your projects at no cost (Twitter Bootstrap is about 200x bigger, even minified!).Moreover, PocketGrid has many nice features: Indeed, PocketGrid is compatible with any other framework such as Twitter Bootstrap or Zurb Foundation (because it does not use 'grid', 'row' or 'col' classes which are used by too many grid systems).įor example, you could use PocketGrid for your layout positioning, and use Twitter Bootstrap for styling, tabs or special components. You can follow on Twitter! Should I use PocketGrid instead of Twitter Bootstrap or other grids? Compatibility: IE6+, Firefox, Chrome, Safari, Opera, and mobile browsers (iPhone, iPad, Android.).and use the Pocket grid for other layout)
Compatible with CSS frameworks such as Twitter Bootstrap or Zurb Foundation (you can use the Bootstrap or Foundation components such as buttons, tabs, etc.Automatic rows (when a row is full, the next blocks go to a new row without doing anything).Manage consistent gutters (gutters can be defined in pixels or ems, which is better than percentage-based solutions because it allows consistent gutters even in nested grids).Unlimited number of columns (no 12 or 16 columns restrictions: blocks just require a width in percentage).Very simple (just have to define blocks and groups of blocks).Semantic (as much as a pure CSS grid could be ) ).Content-first compatible (you can swap columns and you can define your own breakpoints for each content in your page to fine-tune and optimize your content readability: not only 'tablet' or 'smartphone' breakpoints).Mobile-first compatible (block width is 100% by default).Unlimited number of breakpoints (you can define your own Media Queries).Fluid (by default, but you can set a fixed width or max-width if you want).Pure CSS-only (no CSS preprocessor needed).I also get rid of the negative margin on the ul.PocketGrid is the smallest responsive grid system having so many features: To do so, I make all the li‘s 100% wide and remove their left margin. For this example, I’ve decided to turn the grid into one column at 480px wide (typical mobile breakpoint). The icing on the cake is a few simple media queries. This way you can change the ul class to dictate how many columns you want. Now that we have our li widths, we’ll create 3 separate classes for them. Now we need a little math to figure out the li widths for each grid: Margin-left: -2.5% /* should match li left margin */ This translates into a left margin of 2.5% for each li and a negative left margin of 2.5% for the ul. In this example, I’ve chose a universal margin of 2.5% for all grids. To create a grid with spacing (gutters) we need to also accommodate for margins. For example, if we have 4 columns they should all equal 25% width. The whole point of responsive grids is to do perfect math. I’ve added some extra li styling to make the grid look nice 🙂 What? I know, it shocked me at first too, but it works! And the double font-size declaration is for our old friend IE (Internet Explorer doesn’t recognize rem units, so the 16px is a fall-back). Normally, most web developers would float to get a “grid effect.” Instead, I’ve used the display: inline-block approach with a nice little hack – we set our ul to font-size: 0px and then our li‘s to font-size: 16px AND font-size: 1rem. There’s a few critical things to understand here: 1) Display vs.
Now that we have our markup, we’ll add some styling to make our grid responsive. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Note: these are all optional, you could easily create this grid with just images inside of the li‘s. Inside each li we’ll throw in an image, an h3, and a p for some content.
Our HTML is a simple unordered list with the class of rig –. Now that we know why they’re useful, let’s dig in! The HTML Image grids are used all over the web – for pictures, products, profiles… you name it! Why? Because they’re a great solution for displaying rows and columns of visual data. No fancy dancy JavaScript or frameworks needed, just good ‘ole HTML and CSS. Today we’re going to build a responsive image grid using CSS.
0 kommentar(er)
