small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2nqQzdl">CSS-Tricks</a> | Robin Rendle
No. Well. Mostly No.
Grid is much newer than Flexbox and has a bit less browser support. That&#8217;s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.
To put a point on it:
<ol>
<li>Grid can do things Flexbox can&#8217;t do.</li>
<li>Flexbox can do things Grid can&#8217;t do.</li>
<li>They can work together: a grid item can be a flexbox container. A flex item can be a grid container.</li>
</ol>

Even though Grid is pretty new, we have <a href="http://ift.tt/2mVQ0Mu">lots of articles</a> about it, including a <a href="http://ift.tt/2miBfyg">getting started article</a>, an article about <a href="http://ift.tt/2kGWp8j">a basic layout done multiple ways</a>, and <a href="http://ift.tt/1LnSQjf">a complete guide</a>.
If you hadn&#8217;t heard the trumpets blaring, <a href="https://twitter.com/render_conf/status/847741282730389504">March 2017</a> was the banner month for Grid. It was released, completely unprefixed and ready-to-go, in Chrome, Opera, Firefox, and Safari. Even Edge supports it, albiet an older version of the spec, which you can get some support for by using <a href="http://ift.tt/1J3PTjF">Autoprefixer</a>.
So.
<blockquote>Does Grid replace Flexbox?</blockquote>
It seems a little complicated at first. Especially if you&#8217;re just starting to get a grip on the weird, alien syntax of Flexbox. Now there is a whole other syntax to learn? Sheesh.
Here&#8217;s some things Grid is specifically better at than Flexbox:
<ul>
<li>Making whole page layouts. It&#8217;s better for that even just considering <a href="http://ift.tt/1LjdzDb">layout performance reasons</a>.</li>
<li>Making literal grids. Like X columns with Y gap between them homegrown framework stuff. <code>grid-gap</code> is wonderful, as gutters are the main pain point of grid systems.</li>
<li>Requiring <a href="http://ift.tt/2oe0Zx4">less media query intervention</a> with really powerful functionality like auto layout, <code>minmax()</code>, <code>repeat()</code>, and <code>auto-fill</code>. Here&#8217;s <a href="https://twitter.com/jensimmons/status/847576895055069184">a neat idea</a>.</li>
</ul>
And another huge one: Grid can position elements in 2 dimensions. Both columns and rows. That&#8217;s a first. Rachel Andrew once <a href="http://ift.tt/1RKif3U">made that very clear</a>:
<blockquote>Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.</blockquote>
Let&#8217;s see some demos.
Say we&#8217;re building a horizontal navigation component — that&#8217;s the perfect use case for Flexbox because it sets content in only one direction. In Chris&#8217; demo below you can mess around with those properties and see just how powerful Flexbox is:
See the Pen <a href="http://ift.tt/1DjyONj">Bar Navigation with Flexbox and SVG icons</a> by Chris Coyier (<a href="http://ift.tt/UB69j1">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.
But there are some instances where those flexbox properties, such as <code>justify-content</code> or <code>align-items</code>, should be used in conjunction with Grid properties. Take this demo for instance:
See the Pen <a href="http://ift.tt/2nqYx6n">Flexbox and Grid &nbsp;–&nbsp;First demo</a> by Robin Rendle (<a href="http://ift.tt/1FeS3dG">@robinrendle</a>) on <a href="http://codepen.io">CodePen</a>.
First we&#8217;ve made a .wrapper that is set to <code>display: flex;</code>. That way we can set a max-width on our <code>.grid</code> and use <code>justify-content: center;</code> to place it in the middle of the viewport. Then we can make our grid with the right number of columns:
<pre><code>.wrapper { 
 display: flex; 
 justify-content: center; 
} 
 
.grid { 
 display: grid; 
 max-width: 800px; 
 grid-template-columns: 1fr 2fr; 
}</code></pre>
That&#8217;s just the first step.
Now let&#8217;s make that <code>.ad</code> take up the whole row of our grid. Well, we can do that by specifically targeting our <code>&lt;div&gt;</code> without messing up the rest of the children of our grid:
<pre><code>.ad { 
 grid-column-start: 1; 
 grid-column-end: 3; 
}</code></pre>
What we&#8217;re saying with the code above is &#8220;start this div on the first column and end on the very last column.&#8221; That should look something like this:
See the Pen <a href="http://ift.tt/2nqOXk5">Flexbox and Grid </a> by Robin Rendle (<a href="http://ift.tt/1FeS3dG">@robinrendle</a>) on <a href="http://codepen.io">CodePen</a>.
Further, let&#8217;s say that we always wanted our ad block to be twice the size of our first row – we can totally do that! We just need to use the <code>grid-template-rows</code> property:
<pre><code>.grid { 
 display: grid; 
 max-width: 800px; 
 grid-template-columns: 1fr 2fr; 
 grid-template-rows: 1fr 2fr 1fr; 
}</code></pre>
That&#8217;s the equivalent of saying: &#8220;there are three rows in our grid. Always make sure that the second row is twice the size of the first and third.&#8221; In other words, we&#8217;re creating relationships between rows and other rows whilst also defining the number of columns in our grid!
See the Pen <a href="http://ift.tt/2mVIpO5">Flexbox and Grid </a> by Robin Rendle (<a href="http://ift.tt/1FeS3dG">@robinrendle</a>) on <a href="http://codepen.io">CodePen</a>.
With CSS Grid we can set relationships horizontally (with <code>grid-template-columns</code>) and vertically (with <code>grid-template-rows</code>) but at the same time. Flexbox, on the other hand, is stuck doing either vertical or horizontal layouts (with <code>flex-direction</code>) – but that doesn&#8217;t mean we should ditch it.
<h3>Potentially Confusing: a &#8220;2D&#8221; Layout with Flexbox</h3>
What can get a little confusing is that it&#8217;s not impossible to make multi-dimensional layouts in just Flexbox. For example:
See the Pen <a href="http://ift.tt/2nqZbRt">A &#8220;Grid&#8221; with Flexbox</a> by Chris Coyier (<a href="http://ift.tt/UB69j1">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.
There are certainly rows and columns there, even a final element that spans multiple columns. It&#8217;s easy to build and flexible. It&#8217;s done through allowing <code>flex-wrap</code> on the container, having the children&#8217;s <code>flex-basis</code> be 1/3 of the width of the container, and allowing <code>flex-grow</code> to stretch children if need by. (The <code>flex</code> property is shorthand for <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code>.)
It&#8217;s not wrong, it&#8217;s just one way of doing something like this, and you could probably make an argument for it being less intuitive and adaptable.
<h3>Potentially Confusing: a &#8220;1D&#8221; Layout with Grid</h3>
Grid can do 2D layout, meaning defining both <code>grid-template-rows</code> and <code>grid-template-columns</code>, but it doesn&#8217;t have to use both. Here&#8217;s a demo of using it just to lay boxes in a horizontal row:
See the Pen <a href="http://ift.tt/2mVLNIE">Easy Columns with Grid</a> by Chris Coyier (<a href="http://ift.tt/UB69j1">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.
This isn&#8217;t wrong either. In fact, you could easily make the argument that this is easier to understand and more succinctly expressed than doing it with flexbox. For example, no layout properties are needed on the child elements at all. But you could also argue that purely 1D layout like this is more powerful in Flexbox, because Flexbox allows us to move those elements around easier (e.g. move them all to one side or another, change their order, space them out evenly, etc).
<h3>About That Nesting</h3>
One more time to lock it in!
This is good to remember: grid items can be flex parents.
<img src="http://ift.tt/2nr3c8c" alt="">
See the Pen <a href="http://ift.tt/2nqSMp7">Easy Columns with Grid</a> by Chris Coyier (<a href="http://ift.tt/UB69j1">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.
And, flex items can be grid parents:
<img src="http://ift.tt/2mVH5KU" alt="">
See the Pen <a href="http://ift.tt/2mVQylI">Easy Columns with Grid</a> by Chris Coyier (<a href="http://ift.tt/UB69j1">@chriscoyier</a>) on <a href="http://codepen.io">CodePen</a>.
<hr>
<a href="http://ift.tt/2nqQzdl">Does CSS Grid Replace Flexbox?</a> is a post from <a href="https://css-tricks.com">CSS-Tricks</a>

Does CSS Grid Replace Flexbox?

Does CSS Grid Replace Flexbox?

Top Stories