The main differences between Flexbox and CSS Grid

The main differences between Flexbox and CSS Grid

Dimensions define the primary demarcation between Flexbox and CSS Grid. Flexbox was designed specifically for one-dimensional layouts, while CSS Grid is engineered to enable two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.

Dimensions define the primary demarcation between Flexbox and CSS Grid. Flexbox was designed specifically for one-dimensional layouts, while CSS Grid is engineered to enable two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.

In layperson’s terms, CSS Grid presents a larger canvas, while Flexbox offers minute functionality that operates in a restricted space. The grids have been designed for a two-dimensional organization.

However, the two specifications share some common points, and if you know how to use flexible boxes, you will find some concepts that will help you to grasp CSS grids.

In this article, we’ll go through the main differences between Grid and Flexbox, summarized as follows:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

Getting to know Flexbox and Grid

The one-dimensional Flexbox

CSS Flexible Box Layout (or Flexbox) allows designers to position responsive elements appropriately within screens of different sizes. The tools include:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

Flexbox is popular among front-end developers, since it allows developers to create multiple instances of dynamic layouts and effortlessly align content within containers.

The flexible box module has been designed as a one-dimensional presentation model and as a method that can provide space distribution between interface elements and powerful alignment functions. When we describe the flexbox as one-dimensional, we describe the fact that flexbox processes layouts in one dimension at a time, as a row or column. This can be compared to the two-dimensional model of the CSS grid layout, which controls columns and rows together.

<div class=”wrapper”>
 <div>One</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div>
</div>
.wrapper {
 width: 500px;
 display: flex;
 flex-wrap: wrap;
}
.wrapper > div {
 flex: 1 1 150px;
}

Pros:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

Cons:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

The two-dimensional Grid

CSS Grid aligns items in columns and rows, allowing developers to easily control the rendering and appearance of large layouts and whole pages meant for the desktop, tablet, and smartphone displays.

Items are placed inside the cells defined by the grid. Creating and defining the overall layouts remains the strong suit for CSS Grid. Internet Explorer, Chrome, Safari, Edge, and Firefox support Grid. Notably, Opera Mini, Blackberry Browser, QQ Browser, and Baidu Browser does not support Grid.

It offers automation to create a layout, or define automatic placement rules that perform placements inside a given grid.

<div class=”wrapper”>
 <div>One</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div>
</div>
.wrapper {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}

Pros:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

Cons:

  • Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
  • The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.
  • The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.

Differences Between Flex and Grid

Dimensionality and Flexibility

Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows. This system works for smaller layouts, but cannot render complex displays such as text or document-centric properties that enable floats and columns.

Grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex.

Alignment

Flexbox allows fine-tuning of alignments to ensure exact specification sharing. Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns.

For broader alignments in both dimensions simultaneously, CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows. The in-built automation saves developers from re-work regimes that may potentially originate in confused calculations.

Item Management

Flex Container is the parent element while Flex Item represents the children. The Flex Container can ensure balanced representation by adjusting item dimensions. This allows developers to design for fluctuating screen sizes.

For fine-tuning this aesthetic, Grid supports both implicit and explicit content placement. Its inbuilt automation allows it to automatically extend line items and copy values into the new creation from the preceding item.

Conclusion

Flexbox and CSS Grid both allow a powerful measure of control over their respective domains of front-end development. However, their capabilities are exponentiated when they are combined, utilizing their respective strengths to create an extremely fluid, customizable, beautiful, smooth, and simple experience.

Combining their code also results in a more lightweight setup where abstraction in both domains spills over into the other. There are vast applications to both options, and even more when they are combined into a powerful setup.

Learn more about relationship of grid layout to other layout methods here.

Top 20 UX/UI Design tool to enhance your Designs

Top 20 UX/UI Design tool to enhance your Designs

In this article, you'll see top 20 UX/UI Design tool to enhance your Designs

UX design is all about providing your users with the information they’re looking for, and doing that in the cleanest and most intuitive way possible. Sounds challenging right? Well that’s just a day in the life of a UX Designer.



While the responsibilities of UX Designers vary from company to company (and even project to project), there are some general functions they all perform irrespective of their companies. Starting with product research, creating personas and information architecture and wrapping things up with wireframes, prototyping and product testing, UX Designers have a broad spectrum of tasks. And with so many tasks at hand, things can get a little sticky if you don’t have the right tools in place to lighten the burden. After all, no artisan really feels complete without their tools, and frankly UX Designers are no exception.

Source: Mockplus

Since designers have to deal with more complex UX issues to make their design more appealing to the targeted audience, they are looking for some tools that can help them automate some tasks or cut down on the complexities. Thankfully, there are hundreds of UX design tools available on the web. Of course, you don’t need all of them. To help you out, here we are bringing a round-up of some cool UX design tools, give them a try.

In this article, we’ve rounded up a list of the most useful tools for UX Designers and to make it a bit more user-friendly, we’ve broken these tools into five different categories: UX Analytics Tools, Session Recording & Heatmapping Tools, A/B Testing Tools, Visual Feedback Tools, and Prototyping & Wireframing Tools.

1. Sketch

Sketch is lightweight MacOS based UI tool. Although Photoshop is a personal favorite with the designers, still some have made a switch to Sketch. This super graphic design tool possesses similarity to Photoshop but is more focused on UI/UX design. The tool is powerful, has a wide range of features and brings out professional results. It extends infinite zooming, 2x export, and styled vector shapes which are apt for multiple resolutions. Sketch offers an ‘Export All’ feature and as it is vector-based, there is no problem in exporting PDF, JPG, and PNG (optionally in 2x) files.

Generally, app designers prefer 3 different tools for 3 purposes namely Omnigraffle for wireframing, Photoshop for visual design, and Illustrator for vector logos. All these 3 tools are perfectly aligned with Sketch, thereby making one app fulfill all your needs and achieve overall productivity with no wastage of time.

The sketch is suitable to use owing to its simple operation and the feature which can design the symbols of common elements like buttons, tabs, headers etc with ease. It not only fires up the process of wireframing but also enables an easy hand-off to the visual designers. As we are employing the same tool in the visual design stage, there won’t be much trouble in updating wireframes into high-fidelity visuals.

All the changes that we have witnessed in-app designing have been made possible because of Sketch’s vectorized model, components like multi-resolution exporting and shared styles and symbols.

2.Invision

A workflow, collaboration, and prototyping tool that has the capability to convert your static application designs into fully functional prototypes having an interactive nature.

What is even more impressive is the fact that these prototypes carry animations, transitions, and gestures for Android, iOS, as well as responsive web apps.

Let your clients have a firsthand experience of navigating through designs, leading to more sales when displaying to existing or prospective clients.

With Invision, you not only test visuals, but even wireframe flows in a more tangible manner.

Without any kind of coding, you can have designs coming to life, letting you as designers to identify issues and problems upfront, helping you to iterate accordingly.

3. MockFlow

MockFlow enables you to build basic layouts quickly

MockFlow is a suite of applications that are very helpful for a number of tasks in the typical project process. Primarily, the WireframePro app is a good alternative prototyping tool for you to use, especially if you’re testing out some new ideas.

If you just need to create wireframes, then take a look at MockFlow. It’s great for working on initial ideas and enables you to build basic layouts quickly, which is sometimes all you need to get thoughts into a presentable form.

4. Balsamiq

Balsamiq’s drag-and-drop elements make life easier

If rapid wireframing is what you’re looking for, then Balsamiq is a strong suggestion. You can quickly develop structure and layouts for your projects with ease. The drag-and-drop elements make life easier and you can link buttons to other pages. This means you can quickly start to plan your interfaces and then share them with your team or clients.

5. Pidoco

With the cloud-based software Pidoco you can create, share and test wireframes, mockups and prototypes. You will be able to add multiple pages and layers, and it also includes a library of drag-and-drop interface elements. Pidoco allows you to share prototypes with clients online and has functions to facilitate feedback and back-and-forth discussion. The price of this tool starts from $12 up to $175 a month (depending on the number of active projects).

Website: www.pidoco.com

6. Gliffy

Gliffy is a web-based diagram editor. This tool, let users drag and drop components and export images. You have got the possibility to collaborate online and there is also a version tracking function included. Gliffy is recommended for personal use and/or smaller businesses. Pricing ranges between $3.99 to $7.99 a month or you can choose the enterprise option (custom pricing).

Website: www.gliffy.com

7. UXPin

Designers are usually forced to come up with manual documentations when creating prototypes for development-ready designs.

UXPin is a great tool for automating the prototyping process and obtaining effective feedback.

UXPin allows the design teams to design, collaborate, and assess the prototypes before the development of the final product.

It works by generating necessary data for developers to use in designing various projects and ensures the prototype is in sync with the projects’ design elements.

8. Visual Inspector

Running a live website is a great way for UI designers to ensure any interface issues arising during the design and development of an application are resolved before deployment.

The Visual Inspector tool helps designers to achieve this quickly and without any hassles. It does not require coding or complicated tech skills to get the software running.

Visual Inspector can work with any website template — HTML, WordPress, and other templates.

9. InVision

Cost:

  • Single project — Free
  • 3 projects (starter) — Single project — Free3 projects (starter) — $15/monthUnlimited Projects (Professional) — $25/month5/month
  • Unlimited Projects (Professional) — $25/month

Runs on:

  • Single project — Free
  • 3 projects (starter) — Web5/month
  • Unlimited Projects (Professional) — $25/month

Prototypes for:

  • Single project — Free
  • 3 projects (starter) — AndroidiOSWeb5/month
  • Unlimited Projects (Professional) — $25/month

Invision is by far the most popular prototyping tool in the world. Their team is constantly adding new features to help designers prototype more efficiently. With InVision’s project management page, you can organize design components into a status workflow. You can set columns for To-do, In progress, Needs review, and Approved, and drag and drop your design components into the appropriate column.You could add interactions and animations to static images. You can upload multiple file types, including JPG, PNG, GIF, AI, and PSD. It has push and pull integrations with apps like Slack, Dropbox, Box, Trello, JIRA and much more.

It has simplified every aspect of our workflow and collaboration between design and development. One can design better, faster, and more collaboratively with real-time, and it’s in-browser design collaboration and presentation tools. Seamlessly launching meetings and creating guided tours with clients, and also present designs to stakeholders.Many unicorns use this prototyping tools for us UI/UX needs like Uber, Salesforce, Twitter, Linkedin etc which proves that this tool is the best for prototyping.

10. Adobe Experience Design

Cost:

  • Single project — Free
  • 3 projects (starter) — Free5/month
  • Unlimited Projects (Professional) — $25/month

Runs on:

  • Single project — Free
  • 3 projects (starter) — OS XWindowsAndroidiOS5/month
  • Unlimited Projects (Professional) — $25/month

Prototypes for:

  • Single project — Free
  • 3 projects (starter) — All5/month
  • Unlimited Projects (Professional) — $25/month

With Adobe XD, you can draw, reuse, and remix vector and build artwork to create wireframes, screen layouts, interactive prototypes, and production-ready assets all in the same app. We can switch easily from design to prototype right within the app. Also, add interactions and transitions and share with teammates and stakeholders to test the look and feel of your design.A product coming from adobe allows integrations with several of its products like Photoshop and After Effects which is a big plus.

Designers can be more productive by just importing files from their tools of Adobe without any hassle.Clients can make comments on your prototypes when you share directly, and view designs in real time on actual devices.

11. POP

Transforming your ideas into a workable prototype that people can actually use and share their valuable feedback is a time-consuming task. POP is here to help you out. With this tool, you will be able to build prototype right away without going through the rigorous and time-consuming process of doing it manually.

12. Wireframe CC — The minimal quick wireframe tool

Platform: Web-based

**Speed: **Less than10 mins

**Price: **Free

Fidelity: Low-fidelity

Wireframe.cc is an online wireframe tool, featuring a simple interface for quickly sketching your wireframes. It even reduces the toolbars and icons of a typical drawing app.

So, how quick it could be?

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

As the tool says itself, it only focuses on the very basics, no interaction or animation are available. The function of Wireframe.cc is basic and quick but kind of limited.

User feedback: “ This quick design software allows you to create the skeleton structure of the website before you go into adding all the complicated content on it. “

13. Balsamiq Mockups — A quick wireframe tool based on Flash

Platform: Mac, Window, Web-based

Speed: 5–10 mins

Price: Free trial — 30 days; Pro — $89

Fidelity: Low-fidelity

Balsamiq Mockups, developed by a software engineer, has won favor by many designers. It’s a great tool for designers to do quick wireframe design.

How Balsamiq can work quickly to do wireframe?

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

However, Balsamiq Mockups is not suitable for building large prototypes for the lake of in-depth animations.This is also not the original intention of the tool, which is actually created to do quick and rough wireframes not any prototypes.

User feedback: “ Mockups takes the product design process from hours to minutes… I just mocked up a new interface in about four minutes using the AIR version. So amazing! 

14. Fliud UI — A quick wireframe tool focuses on mobile App pattern

Platform: Web-based

**Speed: **10–15 mins

Price: Individual-&8.25 per month; Pro-$19.08 per month; Team-$41.58 per month

Fidelity: High-fidelity

Fliud UI is a web-based wireframe tool. Unique with the most wireframe tools, it supports gesture and animation. If you are seeking a tool for high-fidelity wireframe design, Fliud UI maybe your first choice.

Check the unique features to quickly do high-fidelity wireframe design in Fliud UI:

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

But one thing, upload multiple images is not supported.

User feedback: “ It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.

The above are the 5 quick wireframe tools that can help you do real quick wireframe design. Each has their unique features and some cons. But in general, they are a good a tool for quick wireframe design.

Here, I’d like to share my favorite. The quick speed to do a wireframe is the first requirement, they are all in demand. But in the real design process, we usually need more features, such as the design inspiration, various ways of presentation and share, shortest learning curve, flexible interaction and animation, and plenty more easy-to-use settings. With my personal experience, Mockplus is the best one that meets the maximum requirements. It’s absolutely a brand new tool you shouldn’t miss out.

15. Principle

Principle is perfect for building great-looking animated interactions

Interaction design is what Principle excels at, especially when it comes to mobile applications. Tweaking and getting animated interactions just right is a breeze with Principle. You can look at individual assets and how they independently animate, right down to timings and easing.

16. Atomic

Atomic is another interactive design tool but what sets it apart is the ability to create form elements that you can actually type into. There is also a useful feature that enables you to import data and populate your designs. This really saves some time!

17. UXPin

For larger projects and design systems, UXPin’s a top solution

Described as the ‘end-to-end’ UX platform, UXPin is essentially another design tool but with a powerful ability to create design systems. UXPin serves larger design teams that need to work off the same styles and guides, saving time with product development when collaboration plays a large part.

18. Flinto (MacOs only)

Price: $99 (there’s a 14-days free trial)

This UI design tool is specialized in creating the design for apps and first of all – mobile apps. With its help, you will be able to add animated transitions among the different screens, create little interactions that will express the behavior of users and easily add scrollable areas with any scrolling animation. It is completely compatible with Sketch and that could make the design creation easier.

19. Adobe XD

Price: free

I’ve already told about Adobe Illustrator previously, and this is another product for designers from Adobe team. As they say on the app’s webpage, that it “is made for designers like you, by designers like us”. I appreciate such an approach very much. The Adobe XD focuses not on drawing, like Illustrator, but on prototyping and collective creation, with sharing and commenting options.

20. Marvel

Marvel is web-based app (no need to do any downloading) that has a very shallow learning curve. With an upgraded account, you can make your project a collaborative one. Choose from lots of different prototype frames, from an Apple Watch to an iPhone 6.

You can create screens directly in Marvel or add images from Sketch or Photoshop for example, and sync designs from your cloud storage.

All Marvel’s features are simple and easy to use – such as gestures, layering images and user testing. It also offers a Sketch plugin, which is great if you do lots of app design work in Sketch and want to nick some of the cool features from Marvel, such as the range of gestures and image layering.

Free for one user with two projects, otherwise plans start at £8/US$12 per month.

Editorial Design Patterns With CSS Grid And Named Columns

Editorial Design Patterns With CSS Grid And Named Columns

By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These components repeat to display an article, images and other related content — with content editors selecting the right component as they create articles for publication.

In this article, I’m going to demonstrate an approach to this kind of editorial design, which builds on a few techniques some of which are discussed in the following articles:

In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. It also demonstrates more of the promise of subgrid (a part of the upcoming Level 2 of the grid specification and being implemented in Firefox).

Naming Things In CSS Grid Layout

When using CSS Grid Layout, you can name lines and areas. Both of these things can make working with Grid — especially complex grids — more straightforward. Defining naming conventions for things in your layout can be useful when working with your team; it is much easier to understand where anything placed with grid-area: content will end up than having something placed from column-line: 3 / 9.

When using the grid-template-areas approach, you give the items that you want to place on the grid a name by using the grid-area property and then placing them around the grid. In the following example, the item with grid-area: content goes into the grid area defined by the grid-template-areas property:

This works well for components where you have one item to go into one area; however, if you want to place multiple things into the content area (one below the other), using grid-area is the wrong approach. Instead, you might define names for the column lines and place the item from the start to end line.

This isn’t as neat, however, when using the grid-area approach we have to know both the start and end line when placing an item using grid-column or grid-row — or do we?

Take a look at this next CodePen example. My items are placed using a single name or ident by using the grid-column property, even though some of the grid areas being targeted cross a number of columns:

My aim here is to abstract away the complexity of the grid setup when actually using the grid. I can put a lot of work into creating the initial grid, but then place things without thinking too much about it as I populate my pages. I also want to make sure that we can repeat the components as often as we need to as we build up the article. What I have in mind is a content creator using a CMS, and creating blocks of content using the different patterns whilst knowing that they will be placed correctly one below the other on the overall grid.

In order to understand how I got to this point requires an understanding of a few things about CSS Grid Layout as well as named lines and areas.

We Can Name Lines

As you’ve already seen in my second example above, we can name lines on the grid that can be pretty much anything we like — other than the word span. The name is an ident rather than a string which is why it is not quoted.

However, you will see many examples where the naming conventions name-start and name-end are used that append -start onto the name of the start line and -end on the name of the end line. This is not purely convention and for the technique I am going to show you why we need to name our lines this way. So you should pick a name for the area you are describing, and then add the -start and -end suffixes — which need to match, of course!

We name our lines inside square brackets. Lines can (and often need to) have multiple names. In this case, space separates the names. When placing the items using line-based positioning, you can pick any name for the line to do the placement.

With our named lines in place, we could place our items using grid-column by specifying the start and end line name. This pattern is just the same as using line numbers, so the name before the slash is the start line and the name after is the end line.

This places the items but isn’t the neat single name per item that I used in the example. However, we now have everything in place due to the special way that Grid handles named areas and lines.

Line Names Give Us A Named Area

Assuming you have named your lines with -start and -end as I have, Grid will give you a named area of the main name you used. Therefore, in my case, I have areas named content, start-half, end-half, full and center. Each of these areas is a single row (as I don’t have named rows), however, it will span the column tracks from the -start to the -end line.

Named Areas Give Us A Named Line Of The Main Name Used

If we want to be able to place our items as if we have a column name, we also need to make use of the fact that when we create a grid area, we get a line name of the main name used; that is, the main name being the name with -start and -end removed. This line name resolves to the start or end of the area depending on whether we are targeting grid-column-start or grid-column-end.

So, we have an area named content, because we have column lines named content-start and content-end. The area named content also gives us the ability to use grid-column-start: content which will resolve to the start line of that content area, while grid-column-end: content will resolve to the end line of the content area.

This, therefore, means that we can place an item into the content area by using the following:

.content {
    grid-column: content / content;
}

Next, we can now tidy up this technique further due to the fact that if you use a named line for grid-column-start and omit the end line (rather than spanning one track as would be the case if you used line numbers), grid copies the name over to the end line. Therefore, grid-column: content is exactly the same as grid-column: content / content;

This is then all we need to be able to place items using grid-column with a simple, single name. This behavior is all exactly as specified and not some kind of “hack”. It demonstrates the depth of thinking that went into the creation of the Grid Layout specification, and the amount of careful work that has gone into making it so straightforward to lay items out in our designs.

Giving This Technique Superpowers With Subgrid

I think this technique is a nice one that enables a very straightforward way of declaring where elements should be placed on the grid. However, if we add subgrid support to the mix, it becomes very powerful indeed.

Currently, subgrid is being implemented in Firefox, and so these next examples require Firefox Nightly to run. You can download Nightly here.

The subgrid value of grid-template-columns and grid-template-rows means that sizing created on a parent grid can be opted into by an item which is a child of the grid (assuming it is also using grid layout) by having display: grid applied.

Line Names From The Parent Are Passed Into Subgrids

In addition to the track sizing information being passed into the child grid, any line names set on the parent will be passed in. This means that we can use our “column names” within subgridded components, making this solution very useful in a world where subgrid exists. An item placed in content — even if nested down inside subgrids — will line up with one placed as a direct child of the main grid.

In this next example, I have nested two elements directly inside the div with a class of full-2. I have also placed a ul inside .content. If we look at the items inside full-2, in order to place these on the parent grid, we need to make the selector full-2 a grid with display: grid then use the grid-template-columns property with a value of subgrid.

This causes the grid on .full-2 to use the tracks defined on the parent grid, and have access to the named lines defined there. As this is a full-width item, this really will behave just like the parent grid in terms of placing our items. We can then use any of the names we defined for the different columns to place the items. In this case, I have set both child elements to grid-column: center and they display one after the other in that center area.

.full-2 {
  grid-row: 4;
  grid-column: full;
  display: grid;
  row-gap: 10px;
  grid-template-columns: subgrid;
}

.full-2 > div {
  background-color: rgb(124,222,220);
  grid-column: center;
}

If we take a look at our nested ul inside .content, we will need to create a subgrid on the selector .content just as with the last example; when we do this, the ul falls into the first track of the subgrid. If we want to lay out the listen items on the subgrid, we need to do two things: cause the ul to take up the same area as its parent by placing it with grid-column: content, and then making it a grid which is a subgrid.

Having done this the list items will lay out using auto-placement into the column tracks of the subgrid:

.content {
  grid-row: 1;
  grid-column: content;
  display: grid;
  grid-template-columns: subgrid;
}

.content ul {
  grid-column: content;
  display: grid;
  row-gap: 10px;
  grid-template-columns: subgrid;
}

Once you have your grid, you can use the names from the parent in exactly the same way as before.

.content li:nth-child(1) {
  grid-column: center;
}

.content li:nth-child(2) {
  grid-column: start-half;
}

.content li:nth-child(3) {
  grid-column: end-half;
}

.content li:nth-child(4) {
  grid-column: content;
}

If you have Firefox Nightly, you can see the full demo in this CodePen example:

You can keep “nesting’ subgrids into your markup structure like this, and each time the line names will be passed through. This is a feature that I think will be particularly useful.

When you create a subgrid, the line numbers correspond to the lines of the subgrid and not the parent grid. Therefore, if you do want to ensure that elements in the subgrid line up with the parent grid, then using line names or named areas (as shown in this example) will make that straightforward and logical.

Wrapping Up

You now know how to use this technique for your main grid, and hopefully, it won’t take too long before we start seeing support for subgrid in all browsers. It’ll enable techniques such as this one and make it incredibly powerful for us to use.