A Short Introduction to CSS Grid Layout for Ecommerce Sites

A Short Introduction to CSS Grid Layout for Ecommerce Sites

October 13, 2017 1:59 pm

CSS Grid is a two-dimensional format mannequin that may be mixed with CSS media queries to supply complicated and responsive website layouts, together with layouts for ecommerce shops.

The Web and the units we use to entry it have grown up. Web sites have turn out to be interactive purposes with vital capabilities. A web-based retailer’s clients, for instance, can store from screens as small as a watch face, as giant as a tv, and every part in between.

Sadly, the online pages used to current these purposes on the varied units haven't all the time been nicely suited to the duty.

“Through the use of a mixture of tables, JavaScript, or cautious measurements on floated parts, authors found workarounds to realize desired layouts,” wrote the editors of the World Extensive Net Consortium, at “CSS Grid Format Module documentation.”

“Layouts that tailored to the obtainable area have been typically brittle and resulted in counterintuitive conduct as area turned constrained. Instead, authors of many net purposes opted for a hard and fast format that can't benefit from modifications within the obtainable rendering area on a display.”

Grid Methods vs. CSS Grid Layouts

Within the quote above, the W3C is being a bit onerous on a number of the present and fashionable format “workarounds.” Let’s contemplate a standard ecommerce format: a class web page with seven merchandise.

A product category page is an example of a common ecommerce layout.

A product class web page is an instance of a standard ecommerce format.

You would use a well-liked CSS framework that features a “grid system.” Grid methods are one of many format “workarounds” that sometimes depend on rigorously measured floats. A grid system shouldn't be confused the equally named CSS Grid Format, or CSS Grid as it's typically referred to as.

The previous employs floats to create grids and nested grids. The latter is a format module first revealed as a W3C draft in 2011 and now supported by all main net browsers together with current variations of Chrome, Firefox, Safari, Edge, Opera, Chrome, and in addition the Android browser.

Right here is a few pattern HTML markup to point out you ways a grid system may work.

<part class="container-fluid">
     <div class="row">
           <div class="col-sm-three">
                <img src="https://cdn..." alt="4..." />
                <h2>4 Sq. Diamonds Males's T-shirt</h2>
           </div>

               ...
 
     </div><!--finish row-->
</part>

The part component with the category identify of “container-fluid” and the div aspect with the category of “row” each add area across the parts contained, which on this instance are the merchandise we need to seem on the product class web page.

The “col-sm-three” class pertains to this grid system’s 12-column format and a set of CSS media queries that make use of totally different fashion declarations, relying on how broad the consumer’s display is. This class may say that on screens of 768 pixels extensive or wider the div component ought to take up three of the out there 12 columns. Successfully, this is able to record 4 merchandise throughout the row.

Within the fashion sheet, this class is about to take up 1 / 4 of the out there area and “float” left, which means it is going to be aligned on the left aspect of its container (mother or father aspect). The floated component is faraway from the traditional stream of the web page.

.col-sm-three 
      width: 25%;
      float: left;
      place: relative;
 

This specific div aspect — with the “col-sm-three” class identify — shall be repeated for each product on the web page.

To make sure the merchandise lay out simply as anticipated, you'd shut the “row” div after 12 columns have been used and reopen a brand new row for the remaining gadgets. Given seven merchandise, you’d want two rows.

<div class="row">
      <div class="col-sm-three">
           <img src="https://cdn..." alt="4..." />
           <h2>4 Sq. Diamonds Males's T-shirt From <sup>$</sup>23.50</h2>
 </div>

          ...// three extra merchandise


 <div class="row">
      <div class="col-sm-three">
           <img src="https://cdn..." alt="Eight..." />
           <h2>Eight Pink Squares Males's T-shirt</h2>
 </div>

...// the remaining two merchandise

You might forego the row divs, and with simply seven merchandise the web page would in all probability lay out and not using a drawback. However in the event you had forty seven merchandise the grid system might grow to be “brittle,” because the W3C put it, and the format may break. Your rows would turn into disjointed, and the floats won't line up.

In case your product class pages have been dynamically generated, which is widespread for ecommerce sites, you would wish some logic in your web page template to shut and open rows. This might in all probability entail having a variable to retailer a product rely. After each fourth product, conditional code would run, including the row parts.

The markup wanted to supply the identical product class web page with the brand new CSS Grid Format is analogous.

<part class="product-grid">

     <div class="grid-merchandise">
           <img src="https://cdn..." alt="4... />
           <h2>4 Sq. Diamonds Males's T-shirt From</h2>
 </div>

</part>

On this instance, the part with the “product-grid” class replaces each the “container-fluid” and the “row” parts.

.product-grid 
      show: grid;
      grid: auto / repeat(four, 1fr);
      grid-hole: 40px 20px;
 

The grid declaration for the “product-grid” class units the peak of the rows to “auto” and defines 4 columns, every taking over an equal portion of obtainable free area — fr is a measure of free area.

The merchandise are outlined in a div that has the category identify of “grid-merchandise.” It's value mentioning that one might have used any class identify or no class identify right here.

.grid-merchandise 
      justify-self: middle;
      align-self: middle;
      textual content-align: middle;
 

This class does nothing greater than middle the product picture and title vertically and horizontally.

This format will render appropriately whether or not there are seven merchandise or 7,000. It doesn't require any scripting to determine when so as to add a row.

Deal with Complicated Layouts

If all that the CSS Grid Format mannequin might do was simplify issues like rows of merchandise, it'd nonetheless be value utilizing in lots of instances. Luckily, nevertheless, it might do much more.

In reality, CSS Grid actually shines whenever you begin to develop comparatively extra complicated layouts.

Product rows, for instance, are only one a part of a typical class web page on an ecommerce website. That web page may have, on the very least, a header, a aspect bar for sorting merchandise, and a footer part.

A product category page is likely to include more than just rows of products. There will be a header element, a side bar, and in this example layout a split footer.

A product class web page is more likely to embrace extra than simply rows of merchandise. There can be a header factor, a aspect bar, and on this instance format a cut up footer.

If we returned to a grid system (once more, a grid system not the CSS Grid), this may start to require some pretty complicated HTML markup that may be considerably troublesome to learn given the variety of div parts, class names, and ranges of indentation.

<div class="container">
      <div class="row">
           <header class="col-sm-12">
                ...
           </header>

     </div>
      <div class="row">
           <apart class="col-sm-three">
                ...
           </apart>
           <part class="col-sm-9">
                ...
           </part>
      </div>
      <div class="row">
           <footer class="col-sm-12">
                <div class="row">
                     <div class="col-sm-5">
                          ...
                     <div>
                     <div class="col-sm-5 col-sm-offset-2">
                          ...
                     <div>
                </div>
           </footer>
      </div>
 </div>

As a result of the CSS Grid Format is a part of the cascading fashion sheet specification, the HTML markup required is easier and, maybe, simpler to know.

<div class="web page">
      <header><h2>Header</h2></header>

     <apart>
           <ul>
                <li>Aspect Bar</li>
                     ...
           </ul>
      </apart>

     <part class="product-grid">
           <h2>Merchandise would go right here</h2>
      </part>

     <div class="left-footer">
           <h2>Left Footer</h2>
      </div>

     <div class="proper-footer">
           <h2>Proper Footer</h2>
      </div>

</div>

The fashion declarations for this format don’t embrace any floats or widths. As an alternative, the format makes use of named template areas to explain how issues just like the header or footer ought to seem on the web page. The interval or dot (.) within the template space between the left and proper footer represents an empty column.

.web page 
      show: grid;
      grid: 100px auto / repeat(5, 1fr);
      grid-template-areas:
           "header header header header header"
           "sidebar merchandise merchandise merchandise merchandise"
           "left-footer left-footer . proper-footer proper-footer";
      grid-hole: 20px;
 

header 
      grid-space: header;
 

apart 
      grid-space: sidebar;
 

.product-grid 
      grid-space: merchandise;
 

.left-footer 
      grid-space: left-footer;
 

.proper-footer 
      grid-space: proper-footer;
 

As you look at the types, discover that the web page is about to show as a grid and that areas of the grid are specified by identify.

grid-template-areas:
      "header header header header header"
      "sidebar merchandise merchandise merchandise merchandise"
      "left-footer left-footer . proper-footer proper-footer";

Gadgets may also be explicitly positioned on the grid. Right here is an much more complicated class web page format. Discover there are a number of empty areas and parts with differing widths and heights.

The CSS Grid Layout also allows for elements to be placed at exact locations on the grid. This makes it possible to created complex layouts.

The CSS Grid Format additionally permits for parts to be positioned at actual places on the grid. This makes it potential to created complicated layouts.

The format pictured has eleven sections. There's definitely extra HTML required, however it's nonetheless straightforward to know.

<div class="web page">
      <header><h2>Header</h2></header>
      <part class="featured">
           <h2>Featured Merchandising</h2>
      </part>
      <apart>
           <h2>Aspect Bar</h2>
      </apart>
      <part class="merchandise">
           <h2>Merchandise</h2>
      </part>
      <div class="feature2">
           <h2>Feature2</h2>
      </div>
      <div class="feature3">
           <h2>Feature3</h2>
      </div>
      <div class="bonus1">
           <h2>Bonus1</h2>
      </div>
      <div class="bonus2">
           <h2>Bonus2</h2>
      </div>
      <div class="bonus3">
           <h2>Bonus3</h2>
      </div>
      <div class="bonus4">
           <h2>Bonus4</h2>
      </div>
      <footer>
           <h2>Footer</h2>
      </footer>
 </div>

Elements are positioned on the grid using line numbers.

Parts are positioned on the grid utilizing line numbers.

The CSS declares the precise place of every aspect utilizing a system of numbered (or named) grid strains. Every column and row is fitted inside these grid strains.

.web page 
      show: grid;
      grid: repeat(5, 80px) / repeat(12, 1fr);
      grid-hole: 10px;
 

header 
      grid-column: 6 / span 7;
 

.featured 
      grid-column: 1 / span 5;
 

apart 
      grid-column: 1 / span 2;
      grid-row: 2 / 7;
 

.merchandise 
      grid-column: three / span eight;
      grid-row: 2 / four;
 

.feature2 
      grid-column: eleven / span 2;
 

.feature3 
      grid-column: eleven / span 2;
      grid-row: four / 5;
 

.bonus1 
      grid-column: three / span 2;
 

.bonus2 
      grid-column: 5 / span 2;
      grid-row: 5 / 6;
 

.bonus3 
      grid-column: 9 / span 2;
 

.bonus4 
      grid-column: eleven / span 2;
      grid-row: 5 / 6;
 

footer 
      grid-column: three / span 10;
 

Think about “bonus4.” It begins at column line eleven and spans two columns. Vertically, it begins at row line 5 and extends down the grid to row line 6.

.bonus4 
      grid-column: eleven / span 2;
      grid-row: 5 / 6;
 

Equally, “feature3” additionally begins at column line eleven and spans two columns, however is positioned between row strains four and 5.

.feature3 
      grid-column: eleven / span 2;
      grid-row: four / 5;
 

Should you needed to vary the positions of those parts, you wouldn't have to edit the order of the markup in any respect; relatively, simply change the type declaration. Making this modification utilizing a grid system or comparable methods could possibly be difficult, however the CSS Grid Format makes it straightforward.

CSS Grid Layouts Matter

This temporary introduction to the CSS Grid Format mannequin has hardly executed the specification justice. I’ve sought to elucidate what the CSS Grid is and supply a few examples.

This format mannequin has the potential to vary how we current ecommerce content material. It might make it attainable to develop new ecommerce design patterns and conventions. It helps designers so as to add the format variety and complexity to an internet design that they could in any other case make use of for print.


You may also like...