---
title: "#284: Does CSS Grid Replace Flexbox?"
publication: "Frontend Focus"
issue: 284
published_at: "2017-04-05"
canonical_url: "https://frontendfoc.us/issues/284"
---

#284: Does CSS Grid Replace Flexbox?

[Read this e-mail on the Web](http://frontendfoc.us/issues/284)

Frontend FocusIssue 284 — April 5, 2017[Chrome Devtools' New 'Code Coverage' Feature](https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf?utm_source=frontendfocus&utm_medium=email)It’s in Chrome Canary only for now, but it shows you which lines were and weren’t used in each JS/CSS file. LogRocket 
[Does CSS Grid Replace Flexbox?](https://css-tricks.com/css-grid-replace-flexbox/?utm_source=frontendfocus&utm_medium=email)A question that might be on your mind after the blitz of CSS Grid articles lately. In short, not exactly, but there are some good examples here. Robin Rendle 
['rems' and 'ems': Why You Might Not Need Them](https://medium.com/@david.gilbertson/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f?utm_source=frontendfocus&utm_medium=email)David Gilbertson assesses each of the reasons for why you might use these units of measure. Hacker Noon 
[![linode\](https://copm.s3.amazonaws.com/b8959f8e.png)](https://welcome.linode.com/frontendfocus?utm_source=frontendfocus&utm_medium=email)[Linux cloud hosting starting at 1GB of RAM for $5/mo](https://welcome.linode.com/frontendfocus?utm_source=frontendfocus&utm_medium=email)Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server. linodeSponsor
[Grid Garden: A Game for Learning CSS Grid](http://cssgridgarden.com/?utm_source=frontendfocus&utm_medium=email)A 24 level online game where you write CSS to grow a garden with the goal of learning CSS Grid along the way. Thomas Park 
[Edge Team Updating CSS Grid Implementation to Latest Spec](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid?tracking_code=bdd76773178edf02eb878abc42c575c2)Edge was the first browser to support CSS Grid, but it’s in a slightly different, older form. You can [check progress here](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/gridupdate/?q=grid). Microsoft 
[The Basics of DOM Manipulation without jQuery](https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/?utm_source=frontendfocus&utm_medium=email)A crash course in DOM manipulation with vanilla JavaScript, using functions like `querySelectorAll` and `addEventListener`. Sebastian Seitz 
[It's the World Wide Web, Not the Wealthy Western Web](https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/?utm_source=frontendfocus&utm_medium=email)How to be more aware of the diverse range of people and devices that may access your sites of when developing for the Web. ([Part 2.](https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/)) Bruce Lawson 


Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)

- [Front End Engineer at Snapdocs in San Francisco (YC W14)](https://jobs.lever.co/snapdocs/7e470587-f0ac-42d0-8afc-5ce5c9859b0e?lever-origin=applied&lever-source%5B%5D=FrontEnd%20Focus)Pre-Series A company in mortgage space with real revenue and growth, hiring empathetic front end engineers who are comfortable with Rails. Snapdocs
- [Sr. Front-End Engineer -- React/Redux (San Francisco)](https://jobs.lever.co/quri/44ffd19f-54fa-466f-9cda-1544f1bd6365?lever-origin=agency&lever-source%5B%5D=Cooper)We're looking for an enthusiastic app developer to join our team. We use React, Flow, GraphQL, Relay, Apollo Client on a daily basis. Quri Inc
- [Frontend JavaScript Engineer (f/m) - Contentful (Berlin)](https://boards.greenhouse.io/contentful/jobs/520996?gh_src=8qpnrk1#.WOJdpRIrKV4)As our front-end engineer, you'll work on a modular user interface where API design and application architecture are the main challenges. Contentful GmbH

Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)

In Brief

[WebAssembly Library Supercharges Web Video Apps](http://www.cio.com/article/3187367/web-development/webassembly-library-supercharges-web-video-apps.html?utm_source=frontendfocus&utm_medium=email) news 
The WebDSP library features algorithms for building web applications operating on media data and provides better performance than JavaScript.
Paul Krill

[New Inspector and Debugger Features for Firefox 54](https://hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/?utm_source=frontendfocus&utm_medium=email) news 
Some improvements to the responsive design mode in Firefox Developer Edition 54.
Mozilla Hacks

[Full-day Workshop: Using ES6 and React with Netflix's Brian Holt](https://forwardcourses.com/workshops/6?utm_source=frontendfocus&utm_medium=email) course 
React eschews the traditional MVC architecture, a counter-intuitive approach Brian explains along with JSX, React best practices, and the React component lifecycle.
Forward CoursesSponsor

[Styling Vertical Chinese, Japanese, Korean and Mongolian Text](https://www.w3.org/International/articles/vertical-text/?utm_source=frontendfocus&utm_medium=email) tutorial 
How to use CSS to produce vertical text for languages such as Chinese, Japanese, Korean, and Mongolian. The CSS specification contains a lot of implementation-specific information.
W3C

[CSS Viewport Units: A Quick Start](https://www.sitepoint.com/css-viewport-units-quick-start/?utm_source=frontendfocus&utm_medium=email) tutorial 
An introduction to the use of CSS viewport units for responsive typography and layout elements.
Asha Laxmi

[Quickly Setting Up Gulp and Sass (for Beginners)](http://front-end-development.net/setting-gulp-sass/?utm_source=frontendfocus&utm_medium=email) tutorial
Petar Vukmanovic

[Grid 'Fallbacks' and Overrides](https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks?utm_source=frontendfocus&utm_medium=email) tutorial 
A cheatsheet to help create good fallbacks/overrides for Grid Layout.
Rachel Andrew

[Using CSS Transitions on Auto Dimensions](https://css-tricks.com/using-css-transitions-auto-dimensions/?utm_source=frontendfocus&utm_medium=email) tutorial
Brandon Smith

[A 17 Minute Overview of Twitter's Front-End Architecture](https://pusher.com/sessions/meetup/viennajs/view-source-twittercom?utm_source=frontendfocus&utm_medium=email) video
Giuseppe Gurgone

[Playing with CSS Grids](https://14islands.com/blog/2017/03/07/playing-with-CSS-grids/?utm_source=frontendfocus&utm_medium=email) opinion 
_“Front-end design is finally making print-like design easier to achieve.”_
Marco Barbosa

[CSS is Broken: My Dime a Dozen Opinion](https://medium.com/@jeremywagner/css-is-broken-my-dime-a-dozen-opinion-3e381b058e4f?utm_source=frontendfocus&utm_medium=email) opinion
Jeremy Wagner

[Test your application against full-sized database copies in seconds](https://www.red-gate.com/products/dba/sql-clone/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=clone_tryfree&utm_campaign=sqlclone&utm_term=email-25720) tools 
Create SQL Server database copies in seconds & test your application as you develop using SQL Clone. [Try free](https://www.red-gate.com/products/dba/sql-clone/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=clone_tryfree&utm_campaign=sqlclone&utm_term=email-25720).
Red GateSponsor

[Microsoft Announces Edge Testing in Partnership with BrowserStack](https://blogs.windows.com/msedgedev/2017/03/30/free-edge-testing-browserstack/#LWkj7q1Q93Ol7guw.97?utm_source=frontendfocus&utm_medium=email) tools 
Run Microsoft Edge ‘inside’ your browser on macOS, Windows, or Linux for free.
Microsoft

[CSS Cursors: View CSS Cursors Your Browser Supports](http://csscursor.info/?utm_source=frontendfocus&utm_medium=email) tools
Wes Bos

[SweetAlert2: An Accessible (WAI-ARIA) Replacement for JS Alerts](https://limonte.github.io/sweetalert2/?utm_source=frontendfocus&utm_medium=email) code

[Pure.css: Small, Responsive CSS Modules](http://purecss.io/?utm_source=frontendfocus&utm_medium=email) code 
Very lightweight, covers grids, forms, buttons, tables, and menus.
Yahoo

[Creating A Responsive Site Without Media Queries](http://codepen.io/snookca/full/LWabjj/?utm_source=frontendfocus&utm_medium=email) demo 
A simple Flexbox and CSS Grid demo showing a responsive layout without media queries.
Jonathan Snook

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/284)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK