recentpopularlog in

dirtystylus : css:grid   54

Amber Weinberg Jones on Twitter: "About to have some FUN recreating this layout in Grid. The original uses floats and tons of negative margins and isn't responsive.… https://t.co/1p001FDEjU"
.grid {
grid-gap: 32px;
grid-template-columns: repeat(4,1fr);
}

.grid li:nth-of-type(6n+3) {
grid-column: 3 / span 2;
grid-row: span 2;
}

.grid li:nth-of-type(6n+4) {
grid-column: 1 / span 2;
grid-row: span 2;
}
twitterthread  css  css:grid  grid  images 
10 weeks ago by dirtystylus
Common Responsive Layouts with CSS Grid (and some without!)
If you're learning how and when to use CSS grid, I've built some common layouts for you to try out.
rwd  css  css:grid  layout  grid  webdesign  webdev 
november 2017 by dirtystylus
Rebuilding slack.com – Several People Are Coding
At first we tried to implement our layout with a traditional 12-column grid using CSS Grid. That approach ultimately didn’t work because we were limiting ourselves into a using a single dimensional layout when Grid is meant for two. In the end, we discovered that a column-based grid wasn’t actually needed. Since Grid allows you to create a custom grid to match whatever layout you have, we didn’t need to force it into 12 columns. Instead, we created CSS Grid objects for some of the common layout patterns in the designs.
css:grid  css  by:minamarkham  webdesign  slack  cssframework  ITCSS 
october 2017 by dirtystylus
Chris Coyier on Twitter: "Easy way to toggle back and forth between your Grid Layout and fallback layout. https://t.co/ZZkYyvKsc0"
Easy way to toggle back and forth between your Grid Layout and fallback layout.

[place an x in “grid”, an old Mike Abato trick)
css  css:grid  tips  by:chriscoyier  layout  testing  browser  devtools  webdesign  webdev 
march 2017 by dirtystylus

Copy this bookmark:





to read