recentpopularlog in

piperh : grid   140

« earlier  
Evan Minto
article title: Intrinsically Responsive CSS Grid with minmax() and min()
css grid isn't intrinsically responsive - article explains how to a make a layout that is, using grid
webdesign  web  design  css  grid  layout  responsive  page 
6 days ago by piperh
Building a Conference Schedule with CSS Grid | CSS-Tricks
details the building of a conference programme layout using css grid
webdesign  web  design  css  grid  layout  conference  congress  table  howto  code 
5 weeks ago by piperh
Grid Experiment No. 8
shows possibilities of design layout with css grid
webdesign  web  design  css  grid  layout 
6 weeks ago by piperh
CSS Grid: No Nonsense Layouts | TestDriven.io
explanation of css grid concepts and practical example layouts
webdesign  web  design  css  grid  layout  tutorial  howto 
7 weeks ago by piperh
GitHub - vladocar/infinity-css-grid: Fluid Flex Solution for making infinite grid columns.
interesting flexbox-based grid column layout. Minimat amount of code, nice responsive layout. Columns have to be equal I think but can merge. Maybe with with some 'self:' added you could have a wider or narrow er column
webdesign  web  design  grid  css  flex  flexbox  responsive  layout  columns 
8 weeks ago by piperh
CSS Grid Generator
css grid code generator, built by Sarah Drasner. Fairly basic perhaps but good starting point. I wonder what happens to box depths when you start adding content
webdesign  web  design  tool  online  generator  css  grid  code  webdev 
10 weeks ago by piperh
Flexible data tables with CSS Grid
explanation of using css grid to create flexible tables
webdesign  web  design  css  grid  table  responsive  data 
10 weeks ago by piperh
CSS { In Real Life } | Debugging CSS Grid – Part 1: Understanding Implicit Tracks
Author says it's important to: '...understand the concepts of the explicit and implicit grid, and their relationship to each other.'
webdesign  web  design  css  grid  layout  implicit  explicit 
11 weeks ago by piperh
CSS { In Real Life } | Controlling leftover Grid items with pseudo-selectors
controlling leftover grid items !?
Does grid really have left over items (like flex) ?
webdesign  web  design  css  grid  flex  flebox  display  layout 
may 2019 by piperh
Quick! What's the Difference Between Flexbox and Grid? | CSS-Tricks
a comparison between css grid and flexbox, pointing out main differences, when is ideal to use one or the other
webdesign  web  design  css  grid  flex  flexbox  comparison  difference 
march 2019 by piperh
CSS { In Real Life } | To Grid or to Flex?
a Michelle Barker piece about grid and flex - what each is best at
webdesign  web  design  css  grid  flex  flexbox  page  layout 
february 2019 by piperh
CSS Grid for Designers – Times Open
haven't read it yet but looks like an a useful walkthrough tutorial about css grid. Some more resource links at end for other tutorials and guides.
webdesign  web  design  css  grid  tutorial  howto  layout  guide 
february 2019 by piperh
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Rachel Andrew Smashing Mag article about responsive design currently (Feb 2018) - flexbox and grid reduce the need for MQs.
webdesign  web  design  grid  flex  flexbox  media  queries  mq  responsive  css 
january 2019 by piperh
CSS Grid Explained in 7 Minutes (with diagrams and code) - YouTube
a 7-minute video lecture explaining the basic concepts of css grid. Quick handy way to understand what it's about before getting into more detail
webdesign  web  design  css  grid  display  layout  tutorial  video  class  introduction  explanation 
january 2019 by piperh
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
shows how css grid doesn't accommodate text wrap around images - you end up using a float like always, which seems to undermine the usefullness of grid. (I can't believe this use case wasn't an important consideration in the implementation of grid).
See addendum linked to Rachel Andrew and css exclusions (currently only in Edge)
webdesign  web  design  css  grid  code  coding  width  columns  float  wrap  around  text  editorial  layout  gutter  margin 
november 2018 by piperh
Grid Tile Layouts with auto-fit and minmax | Geddski
author says: 'auto-fit' was made for this
We use the new auto-fit keyword to create tile layouts. It instructs the Grid to create as many columns of the given size as can fit in the space of the grid container.
webdesign  web  design  css  grid  layout  tile 
november 2018 by piperh
Concise Media Queries with CSS Grid
within 1st para author says: with CSS grid we can write our grid rules once, and achieve the desired layout at any screen size with a single rule, and without any framework
webdesign  web  design  css  grid  layout  mq  media  queries  flex  flexbox 
november 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
a simple, clear reference cheatsheet for css grid properties and syntax
webdesign  web  design  cheatsheet  css  grid  layout  reference  syntax  display 
november 2018 by piperh
Creating Layouts with CSS Grid — SitePoint
an intro to css grid: The Grid Formatting Context
Adding display: grid to an element triggers a grid formatting context for that element and its children. ...
webdesign  web  design  css  grid  intro  introduction  layout  display 
november 2018 by piperh
Understanding the difference between grid-template and grid-auto
article title: Understanding the difference between grid-template and grid-auto.
Explains about explicit and implicit grids, and grid-template and grid-auto properties
webdesign  web  design  css  grid  layout  template  auto  explicit  implicit 
october 2018 by piperh
CSS { In Real Life }
title: Negative Grid Lines
1st para: Did you know you can use negative line numbers to position grid items with CSS Grid?
webdesign  web  design  css  grid  negative  lines  layout 
october 2018 by piperh
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
a few css recipes for commonly used items or patterns, using flex or grid
webdesign  web  design  layout  components  css  flex  grid  recipes  examples  flexbox 
october 2018 by piperh
Use Cases For Flexbox — Smashing Magazine
Use Cases For Flexbox: last article of a series by Rachel Andrew on the uses for flex and grid
webdesign  web  design  flex  flexbox  layout  grid  css 
october 2018 by piperh
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
step by step code howto for making a horizontally scrolling part of a page, Netflix style
webdesign  web  design  css  horizontal  scroll  scrolling  grid 
october 2018 by piperh
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid — SitePoint
how to progressively enhance the model from a float-based layout to flexbox, and then CSS Grid, respectively.
Might be useful if you ever have to convert a float-based layout rather than starting from scratch
webdesign  web  design  flex  flexbox  css  grid  float  layout  column  row 
september 2018 by piperh
CSS Grid
ready-made css 12-column grid layout, using css grid.
webdesign  web  design  grid  12-column  12  column  layout  responsive  css 
september 2018 by piperh
The Benefits of Using CSS Grid for Web Form Layout — SitePoint
Craig Buckler article about using grid and flex for form construction and layout
webdesign  web  design  css  grid  layout  form  flex 
september 2018 by piperh
Easy and Responsive Modern CSS Grid Layout — SitePoint
1st para: how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties. Useful, with code
webdesign  web  design  css  grid  progressive  fallback  @supports  layout 
september 2018 by piperh
Changes on CSS Grid Layout in percentages and indefinite height - Rego's Everyday Life
serious browser developer's look at % in layout and how browsers calculate it. Possibly brain hurty stuff
webdesign  web  design  css  width  height  percent  percentage  grid  layout 
august 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
css grid layout/code chart + diagrams show position effect. Divided into 'container' and 'children', like flexbox. Each main declaration has brief intro text. Very clear, simple reference.
webdesign  web  design  layout  css  grid  cheatsheet  reference  code  position  chart 
august 2018 by piperh
Should I try to use the IE version of Grid Layout? Revisited for 2018
Rachel Andrew: is it worth using IE's older version of grid?
webdesign  web  design  layout  css  grid  ie  ie11  ie10  autoprefixer 
july 2018 by piperh
9 Biggest Mistakes with CSS Grid - YouTube
nice talk about legacy thinking when using grid. Lose some old habits. Also v useful bit about reasons for holding back - ie IE. She says no reason to hold back, don't jeopardise yourself. There are videos about using grid with IE11
webdesign  web  design  css  grid  layout  common  mistakes  ie  jen  simmons  mozilla 
july 2018 by piperh
The Quirks of CSS Grid and Absolute Positioning
intro: It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, ...
webdesign  web  design  layout  position  positioning  absolute  css  grid 
july 2018 by piperh
CSS Grid in IE: Debunking Common IE Grid Misconceptions | CSS-Tricks
This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE).
webdesign  web  design  layout  css  grid  ie11  ie  explorer  compatibility  fallback 
july 2018 by piperh
Grid by Example - Usage examples of CSS Grid Layout
Everything you need to learn CSS Grid Layout.

gridbyexample.com is a Rachel Andrew project
webdesign  web  design  css  grid  learning  learn  examples  reference 
june 2018 by piperh
Aspect Ratio Cells with CSS Grid Layout by Michelle Barker on CodePen
author says: a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio (1:1 in this case), but the actual grid items did not necessarily
Prob when you understand css grid you'll understand what she means
webdesign  web  design  css  grid  aspect  ratio  layout  cell 
june 2018 by piperh
New CSS Features That Are Changing Web Design — Smashing Magazine
Not especially great explanations of new css features. Long part about grid, then shapes and clip-path. But some handy refs to grid resources, esp. Rachel Andrew
webdesign  web  design  css  grid  shapes  wrap-around  runaround  wrap  around  run  flow  shape  clip  path 
may 2018 by piperh
Another Collection of Interesting Facts About CSS Grid | CSS-Tricks
follow up to 'A Collection of Interesting Facts about CSS Grid Layout'
webdesign  web  design  css  grid  feature  query  sticky  footer  row  column  layout 
may 2018 by piperh
Best Practices With CSS Grid Layout — Smashing Magazine
article about designing with css grid, best practices and what to avoid
webdesign  web  design  css  grid  layout 
april 2018 by piperh
Bulma: a modern CSS framework based on Flexbox
a framework based on flexbox. No js - you choose your own. Components are modular so only import what you need.
webdesign  web  design  css  framework  grid  flex  flexbox  layout 
april 2018 by piperh
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
title: Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'
webdesign  web  design  css  grid  column 
march 2018 by piperh
How Big Is That Box? Understanding Sizing In CSS Layout — Smashing Magazine
Smashing article by Rachel Andrew, titled: How Big Is That Box? Understanding Sizing In CSS Layout
webdesign  web  design  css  flexbox  grid  flex  box  size  sizing  layout 
january 2018 by piperh
New flexbox guides on MDN – Mozilla Hacks – the Web developer blog
by Rachel Andrew. She says: ... Flexbox now sits alongside Grid and Box Alignment to form a new way of thinking about layout for the web. It is useful to reflect this in the documentation. ...
webdesign  web  design  css  flex  flexbox  resource  guide  reference  code  coding  mozilla  grid  layout 
january 2018 by piperh
Unsemantic CSS Framework
they say: Unsemantic is a fluid grid system that is the successor to the 960 Grid System. Not sure if it's built using css grid - needs checking
webdesign  web  design  grid  css  framework  layout 
january 2018 by piperh
CSS Grid Starter Layouts | CSS-Tricks
a collection of starter templates for layouts and patterns using CSS Grid
webdesign  web  design  css  grid  layout  starter  template 
december 2017 by piperh
Learn CSS Grid for free
Course screencast to learn css grid
webdesign  web  design  code  coding  grid  learn  screencast  css  layout 
december 2017 by piperh
Learn CSS Grid in 5 Minutes – freeCodeCamp
Article title: Learn CSS Grid in 5 Minutes
A quick introductions to the future of website layouts.
webdesign  web  design  css  grid  layout  display  tutorial 
december 2017 by piperh
Using CSS Grid: Supporting Browsers Without Grid — Smashing Magazine
Rachel Andrew article about fall-back css for non-grid-supporting browsers. Interesting - many older css properties will be disregarded by supporting browsers if followed by display:grid
webdesign  web  design  grid  layout  html  css  browser  support  fallback 
november 2017 by piperh
Breakdown of a calc() for a square grid by Lasse Diercks on CodePen
Lasse Diercks says: It's one HTML element that turns every child into a square. Uses css grid and calc()
webdesign  web  design  grid  calc  css  square  html  codepen 
october 2017 by piperh
Breaking Down a CSS Grid Layout, an article by Tim Wright
title: Breaking Down a CSS Grid Layout. Focuses on grid-template-columns
webdesign  web  design  grid  css  layout  fraction  fr  grid-template-columns  column 
september 2017 by piperh
Here's a Super Quick Way to Try out CSS Grid | Jen Simmons
article: Here's a Super Quick Way to Try out CSS Grid
by Jen Simmons
webdesign  web  design  css  grid  layout 
september 2017 by piperh
Guide to building layouts with CSS Grid
A collection of resources & tools to help you manage the Grid
webdesign  web  design  css  grid  layout  guide  resources  examples  page  site 
september 2017 by piperh
Designer’s Guide to Flexbox and Grid – Jon Yablonski – Medium
author says: Designer’s Guide to Flexbox and Grid
What designers need to know about these transformational layout tools.
webdesign  web  design  css  grid  layout  flex  flexbox 
august 2017 by piperh
An Introduction to the `fr` CSS unit | CSS-Tricks
about the fr (fraction) length unit in css. Only for css grid
webdesign  web  design  grid  fr  unit  css  length  layout 
june 2017 by piperh
How the minmax() Function Works
Ire Aderinokun article focusing on the minmax function within css grid
webdesign  web  design  css  grid  minmax  value  function  layout  column 
june 2017 by piperh
Get Started with Grid Layout
site by Rachel Andrew all about css grid, very thorough. Videos, code, examples
webdesign  web  design  grid  layout  resource  reference  examples  css 
may 2017 by piperh
Griddy
a css grid playground. Change values and new display and code is generated. Handy for understanding how it works and getting the code generated for you. 21.5.17 works in Firefox not my Chrome (haven't tried Safari or Edge)
webdesign  web  design  tool  css  grid  online  code  generator  display  learn  development 
may 2017 by piperh
RAGrid.css
nice flexbox grid system. But made with attributes so I'm not sure I'd know how to use it - maybe requires sass. Would have to investigate further
webdesign  web  design  grid  css  flex  flexbox  masonry  column  row 
may 2017 by piperh
Does CSS Grid Replace Flexbox? | CSS-Tricks
article about grid and flex, how they can work together, when one and not the other
webdesign  web  design  css  grid  flex  flexbox  layout 
april 2017 by piperh
Which Responsive Design Framework Is Best? Of Course, It Depends. – Smashing Magazine
comparison of a few popular responsive web design frameworks, ie, foundation, bootstrap and uikit
webdesign  web  design  framework  grid  template  bootstrap  foundation  ui  development  construction 
march 2017 by piperh
Learn CSS Grid | Jen Simmons
About grid layout and resource links for learning css grid
webdesign  web  design  css  grid  layout  resources  learn  learning 
march 2017 by piperh
Grid by Example
Rachel Andrew's css grid website
webdesign  web  design  css  layout  grid  rachel  andrew 
february 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read