Web Unleashed 2020 Article - Oct.12/2020
Tags: css, javascript, webdev
Published: 2020-10-12 15:30:41

# **Author: Nick Brazda**

## _*What’s New In CSS? Masonry!*_

- The session I was most interested in during the Web Unleashed Conference was “What’s New In CSS?” presentation by Rachel Andrew. I have been using Cascading Style Sheets now for two years during my Interactive Media Design course. I already know how to construct a basic website layout and how to implement Flexbox and Grid. I am also starting to learn how to use Bootstrap on my HTML. From the session I was hoping to learn more about new designs in CSS, Which I did! 

- One thing I learned about new design in CSS was “Masonry”. Also known as the Pinterest Layout, as the website incorporates this type of design. Masonry is a new experimental CSS design concept that can be accessed using Firefox Nightly. How Masonry should look is the elements on the page should all have different sizing, but they should all come and fit together almost like a puzzle. 

### _*CSS "Masonry" Column Layout ( The "Wrong" Layout )*_

![Image of CSS Masonry](https://w3bits.com/wp-content/uploads/masonry.jpg)

*Image Source: https://w3bits.com/wp-content/uploads/masonry.jpg*

- This layout is somewhat already achievable in CSS Grid, the issue though is that we can only arrange the masonry layout into vertical columns **(Look to picture above for reference)** and not horizontal rows. Why is this the case? The reason is simple grid isn’t masonry because grid has strict rows and columns. Whereas masonry does not have strict rows and columns.  

>Here is a quote from Rachel Andrew _**"The key difference between the layout you get with Multicol and a Masonry layout, is that in Multicol the items are displayed by column. Typically, in a Masonry layout you want them displayed row-wise."**_ *quote source from https://rachelandrew.co.uk/archives/2020/05/05/does-masonry-belong-in-the-css-grid-specification/*

- Below is a picture of how CSS masonry should look when properly aligned into rows.

#### _*CSS Masonry Row Layout ( The Right Layout )*_

![CSS Masonry](https://miro.medium.com/max/1000/1*ksTMskNDTgzgt07XpmYh2w.png)

*Image Source = https://miro.medium.com/max/1000/1*ksTMskNDTgzgt07XpmYh2w.png*

##### _*Corvid by Wix*_

- Another talk that I found interesting was Build Your Full Stack Utility Belt by Joshua Alphonse. He was working with Corvid by Wix. Corvid is a serverless Content Management System that helps you create a simple website like an E-commerce store. It has drag and drop features that will automatically code parts of the website. Corvid also has the ability to input your own code onto your website. What is great about it is that you can quickly create a functional and nicely designed website with drag and drops. which gives you more time to focus on adding your JavaScript or functionality code to your website. 

- After the presentation Chris Coyier interviewed Joshua, and Chris delved into the downsides of potentially creating your website with Corvid. The flaw is that if you create your website with them you are not allowed to leave Wix or migrate your existing Wix website to a .com. There is a free and paid version so you can only get so much being a free Corvid user. Another flaw I think of personally when it comes to these automations is that most of the websites created tend to look all the same with just different colors. 

###### _*My Final Thoughts*_

- The web conference was very informative about new things coming and what you can do in web development right now in 2020. I learned that CSS Masonry is a new design concept that in the future might be used often for websites, apps and programs. CSS Masonry is experimental, and you can experiment with it in Firefox Nightly using Grid. 

- I think after learning this, I am going to try to implement CSS Masonry on a web design that uses a lot of different sized images. My final thoughts are what will be the next design concept that we can’t already recreate? I think that going forward into the future more designs will be created, and now I want to try to create a brand-new layout design for web development that will become the **next greatest thing!**