Kirabug at 03:18, 27 October 2018

2018-10-27T03:18:19Z

← Older revision		Revision as of 20:18, 26 October 2018
Line 9:		Line 9:
	* [https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'] by Sara Soueidan at CSS-Tricks		* [https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'] by Sara Soueidan at CSS-Tricks

	== ~~External~~ Guides ==		== Guides ==

	* [https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display A Complete Guide to CSS Grid] by Chris House on CSS-Tricks		* [https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display A Complete Guide to CSS Grid] by Chris House on CSS-Tricks

Kirabug: Created page with "Category: Cascading Style Sheets CSS Grid is a new capability in CSS that allows designers to lay out the site content in a flexible grid structure defined by the stylesh..."

2018-04-22T05:04:34Z

Created page with "Category: Cascading Style Sheets CSS Grid is a new capability in CSS that allows designers to lay out the site content in a flexible grid structure defined by the stylesh..."

New page

[[Category: Cascading Style Sheets]]

CSS Grid is a new capability in CSS that allows designers to lay out the site content in a flexible grid structure defined by the stylesheets and not the HTML. One benefit is that the HTML can be the canonical syntax for the site (and what it makes sense to listen to if the user's on a screen reader) while improving visual display and using elements of [http://doc.lab.boomi.com/display/ux/Visual+Design Visual Design] falls to the CSS layer to handle. For the UX Designers, this means more flexibility in layout, a return to [http://doc.lab.boomi.com/display/ux/Design+Principles Graphic Design Principles], and a bit more creativity. For front-end Developers, this means a heck of a lot less math in the CSS style sheets, among other benefits.

== Articles about bits of the standard ==

* [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap grid-column-gap] on the Mozilla Developer Network
* [http://gridbyexample.com/video/align-grid-items/ Aligning and justifying grid items] on Grid by Example by Rachel Andrew is a video about how the justify and align settings work.
* [https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'] by Sara Soueidan at CSS-Tricks

== External Guides ==

* [https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display A Complete Guide to CSS Grid] by Chris House on CSS-Tricks
* [https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ Should I use Grid or Flexbox?] by Rachel Andrew
* [https://rachelandrew.co.uk/archives/2017/03/20/css-grid-fallbacks-and-overrides/ CSS Grid Fallbacks and Overrides] by Rachel Andrew
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement CSS Grid Layout and Progressive Enhancement]by Rachel Andrew on the Mozilla Developer Network
* [https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ Should I try to use the IE Implementation of CSS Grid Layout?] by Rachel Andrew
* [http://gwhitworth.com/blog/2017/05/accurately-checking-for-css-grid-support-in-microsoft-edge Accurately checking for CSS Grid in Microsoft Edge] by Greg Whitworth

=== Tutorials ===

* [http://learncssgrid.com/ Learn CSS Grid] by @jonsuh
* [https://cssgridgarden.com/ Grid Garden] by CodePip. This is a great game for learning the basics of Grid.
* [http://gridbyexample.com/ Grid By Example] by Rachel Andrew is a site filled with examples, UI patterns, tutorials, and page layouts.

== Additional Resources ==

I attended An Event Apart Seattle 2017, where a few sessions concentrated on using CSS Grid:

* Rachel Andrew gave a talk called New CSS Layout Meets the Real World, which provides multiple examples of popular design patterns and how they can be implemented in CSS Grid. [http://www.perpendicularangel.com/2017/04/an-event-apart-2017-onboarding-for-any-situation-by-krystal-higgins/ Conference notes]
* Jennifer Simmons gave a talk called Designing with Grid which covered a number of graphic design principle basics, explained why designing with only a few tools can be harmful to the experience for the user, and provided multiple examples of graphic designs rendered in CSS Grid. [http://www.perpendicularangel.com/2017/04/an-event-apart-seattle-2017-designing-with-grid-by-jen-simmons/ Conference notes]

Rachel Andrew has a GIT repository specifically for anyone to ask her anything about CSS Grid. [https://github.com/rachelandrew/cssgrid-ama/issues CSS Grid AMA]

CSS Grid - Revision history

Kirabug at 03:18, 27 October 2018

Kirabug: Created page with "Category: Cascading Style Sheets CSS Grid is a new capability in CSS that allows designers to lay out the site content in a flexible grid structure defined by the stylesh..."