Skip to content

Commit

Permalink
content sizing video
Browse files Browse the repository at this point in the history
  • Loading branch information
rachelandrew committed Jan 14, 2018
1 parent 1c8ddc7 commit b50047e
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 5 deletions.
2 changes: 2 additions & 0 deletions _layouts/learn.html
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ <h3>Video and Presentations</h3>
<ul>
<li><a href="/video/series-minmax/">Introducing minmax()</a></li>
<li><a href="/video/series-auto-fill-auto-fit/">Introducing auto-fill and auto-fit</a></li>
<li><a href="/video/content-sizing/">Sizing tracks with the content sizing keywords</a></li>
</ul>
</div>

Expand Down Expand Up @@ -170,6 +171,7 @@ <h3>Video and Presentations</h3>
<div class="learn-article panel-box">
<h3>Articles and blog posts</h3>
<ul>
<li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Using CSS Grid: Supporting browsers without grid</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">MDN: CSS Grid Layout and Progressive enhancement</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">MDN: CSS Grid Layout and accessibility</a></li>
<li><a href="https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks">Fallbacks and Overrides cheatsheet</a></li>
Expand Down
4 changes: 3 additions & 1 deletion _layouts/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ <h1>{{ page.title }}</h1>

{{ content }}

<p><em>Many of these videos were produced prior to Grid landing in browsers. So there may be some references to when Grid ships or to browsers not supporting Grid yet. Grid is now available in Chrome, Firefox, Safari and Edge. Enjoy!</em></p>

<div class="box">
<h4>Become a CSS Layout expert in 2017!</h4>
<h4>Become a CSS Layout expert in 2018!</h4>
<p>I hope you like these tutorials. If this is a style of learning you enjoy then check out my <a href="https://thecssworkshop.com/?utm_source=gridbyexample&utm_content=video">CSS Layout Workshop</a>. Learn layout from the basics through to new and advanced features including flexbox, Grid, CSS Shapes and more.</p>
</div>

Expand Down
10 changes: 10 additions & 0 deletions _video/content-sizing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
order: 21
title: "Content sizing keywords"
desc: "Using min-content, max-content and fit-content for track sizing"
layout: video
active: video
thumbnail: 'video-named-lines.png'
video-embed: '<iframe src="https://www.youtube.com/embed/j9NtTFd_eZY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>'

---
7 changes: 3 additions & 4 deletions browsers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,15 @@ The Blink implementation has been carried out by Igalia, sponsored by Bloomberg.

## Microsoft Edge

On launch Edge shipped with the IE11 Grid implementation. Therefore the current implementation in Edge is against the original and not the new spec.
On launch Edge shipped with the IE11 Grid implementation.

On Monday 3rd April, 2017 - on stage at An Event Apart - Microsoft announced that work has started to update the Edge Grid implementation to the new spec. This updated implementation is in Edge 16 and expected to ship October 17th 2017.

You can [keep track of the Edge Status of updating Grid Layout](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/gridupdate/?q=grid%20update).
The updated implementation is in Edge 16 and shipped October 17th 2017.

## Internet Explorer 10 and 11

The original Grid implementation was part of IE10, also in IE11. This implementation is now quite different to the current spec and other implementations. Internet Explorer 11 will never be updated to the new specification. There is some possibility in using the old spec to provide some grid layout for these browsers however.

- [Using CSS Grid - Supporting Browsers Without Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/)
- [April 2011 Grid Spec](http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/)
- [My 24 Ways Article covering the IE implementation](http://24ways.org/2012/css3-grid-layout/)
- [Should I try to use the IE implementation of Grid Layout?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)

0 comments on commit b50047e

Please sign in to comment.