Skip to content

A short introduction to the layout of the CSS grid for e-commerce sites

--Advertisements --

CSS Grid is a two-dimensional layout template that can be combined with CSS media queries to produce complex and responsive website layouts, including layouts for e-commerce stores.

The Internet and the devices we use to access them have grown. Web sites have become interactive applications with significant capabilities. Customers of an online retailer, for example, can shop from screens as small as a dial, as large as a TV, and everything in between .

Unfortunately, the web pages used to present these applications on different devices have not always been well suited to the task.

” Using a combination of tables, JavaScript, or neat measures on floating elements, the authors have discovered workarounds to get the desired layouts “wrote the writers of the World Wide Web Consortium. ]

"Arrangements adapted to the available space were often fragile and resulted in counterintuitive behavior as space became limited. As an alternative, the authors of many web applications have opted for a fixed layout that can not take advantage of changes in rendering space available on a screen. ”

Grid systems and CSS grid layout

In the quote above, the W3C is a bit difficult on some of the current and popular workarounds. Consider a common e-commerce layout: a category page with seven products.

-- Advertisements --

A product category page is an example of a common e-commerce layout.

You can use a popular CSS framework that includes a "grid system". Grid systems are one of the "workaround" layout solutions that generally rely on carefully measured floats. A grid system should not be confused with the CSS structure named in the same way, or CSS Grid as it is often called.

See also  12 new commercial books for 2018

The first uses floats to create grids and nested grids. The latter is a layout module first released as a W3C project in 2011 and now supported by all major web browsers, including the latest versions of Chrome, Firefox, Safari, Edge, Opera, Chrome and the Android browser.

Here are some examples of HTML tags to show you how a grid system might work.

 
 Four ...

Four men's diamond square t-shirt

...

The element section with the class name of ” container-fluid ” and the div element with the class ” row ” add the Space around the contained items, which in this example are the products we want to appear on the category page of products.

-- Advertisements --

Class ” col-sm-3 ” refers to the 12-column layout of this grid system and to a set of CSS media queries that use different style statements, depending on the width from the screen of the user. This class could say that on screens of 768 pixels wide or more, the div element should occupy three of the 12 available columns. Indeed, this would list four products across the rank.

In the style sheet, this class is set to occupy a quarter of the available space and ” float ” left, which means that it will be aligned on the left side of its container (parent element). The floating element is removed from the normal flow of the page.

 .col-sm-3 {
width: 25%;
float: left;
position: relative;
} 

This particular div element – with the class name ” col-sm-3 ” – will be repeated for each product on the page.

For products to look as expected, you must close the div ” row ” after using 12 columns and reopen a new line for the other items. Given seven products, you would need two rows.

 
 Four ...

Men's T-shirt Four Square Diamonds From $ 23.50

... // three other products
 Eight ...

Men's T-shirt of eight red squares

... // the other two products

You could give up the line divs, and with only seven products, the page would probably be formatted without a problem. But if you had 47 products, the grid system could become ” brittle “as the W3C says, and the layout might break. Your lines would become disjoint and the floats might not align.

If the pages in your product category have been generated dynamically, which is common for ecommerce sites, you will need a logic in your page template to close and open the lines. This would likely involve having a variable to store a number of products. After each fourth product, the conditional code is executed by adding the line elements.

-- Advertisements --

The markup needed to produce the same product category page with the new CSS layout is similar.

 
 Four ...
<h2> Men's Four Square Diamonds T-shirt </h2>
</div>

</section> </pre>
<p> In this example, the section with the class ” product-grid ” replaces both the ” container-fluid ” and ” row ” elements. </p>
<pre> .product-grid {
display: grid;
grid: auto / repeat (4, 1fr);
grid interval: 40px 20px;
} </pre>
<p> The grid declaration for the class ” product-grid ” sets the height of the lines on ” auto ” and sets four columns, each occupying an equal share of the available space – <em> en </em> is a measure of free space. </p>
<p> The products are defined in a div which has the class name ” grid-item “. It should be noted that we could have used any class name or class name here. </p>
<pre> .grid-item {
self-justification: center;
align-self: center;
text-align: center;
} </pre>
<p> This class does nothing more than center the image and title of the product vertically and horizontally. </p>
<p> This provision will correctly render there are seven products or 7,000. It does not require any script to decide when to add a line. </p>
<!-- WP QUADS Content Ad Plugin v. 2.0.57 -->
<div class=
-- Advertisements --

Managing Complex Layouts

If all that the CSS Grid Layout model could do was to simplify things like product lines, it might still be worth using in many cases. Fortunately, however, it can do a lot more.

In fact, CSS Grid really shines when you start developing relatively more complex layouts.

Product lines, for example, are only part of a typical category page on an ecommerce site. This page will have, at the very least, a header, a sidebar to sort the products and a footer section.

<img class = ” wp-image-142643 size-large ” src = ” https://www.practicalecommerce.com/wp-content/uploads/2017/10/101217-example- grid-layout-570×307.png ” alt = ” A product category page is likely to include more than just product lines. There will be a header element, a sidebar, and in this example, a split footer. ” width = ” 570 ” height = ” 307 ” />

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

-- Advertisements --

If we returned to a grid system (again a grid system and not the [CSS CSS ), this would require fairly complex HTML markup that can be difficult to read given the number of div elements, class names and indentation levels.

 
...
...
...
...

Because CSS grid formatting is part of the Cascading Style Sheet specification, the HTML markup required is simpler and may be easier to understand.

 

Header

The products would go here

Style statements for this layout do not include any floats or widths. Instead, the layout uses named template areas to describe how elements such as the header or footer should appear on the page. The period or period (.) In the model area between the left and right footers represents an empty column.

 .page {
display: grid;
grid: 100px auto / repeat (5, 1fr);
grid template areas:
" header header header header "
" sidebar products products products products "
" left-footer left-footer. foot-right-foot-right ";
grid interval: 20px;
}

on your mind {
grid-area: header;
}

next to {
grid area: sidebar;
}

.product-grid {
grid area: products;
}

.left-footer {
grid area: left-footer;
}

.right-footer {
grid area: right foot;
} 

When looking at styles, note that page is set to display as a grid and the grid areas are specified by name.

 grid-template-areas:
" header header header header "
" sidebar products products products products "
" left-footer left-footer. right-foot-right foot-of-page "; 

The elements can also be positioned explicitly on the grid. Here's an even more complex category layout. Note that there are several voids and elements of different widths and heights.

<img class = ” wp-image-142642 size-large ” src = ” https://www.practicalecommerce.com/wp-content/uploads/2017/10/101217-complex- layout-570×293.png ” alt = ” The layout of the CSS grid also places the elements at specific locations on the grid. This allows you to create complex layouts. ” width = ” 570 ” height = ” 293 ” />

-- Advertisements --

The CSS Grid Layout also allows you to place items at specific locations on the grid. This allows you to create complex layouts.

The layout shown has 11 sections. There is certainly more HTML required, but it's still easy to understand.

 

Header

Products

Feature 2

Feature3

Bonus1

Bonus2

Bonus3

Bonus4

Footer

<img class = ” wp-image-142641 size-large ” src = ” https://www.practicalecommerce.com/wp-content/uploads/2017/10/101217-grid- lines-570×319.png ” alt = ” Items are positioned on the grid using line numbers. ” width = ” 570 ” height = ” 319 ” />

The elements are positioned on the grid using the line numbers.

-- Advertisements --

The CSS declares the specific position of each element using a system of numbered (or named) grid lines. Each column and each line is adjusted within these grid lines.

 .page {
display: grid;
grid: repeat (5, 80px) / repeat (12, 1fr);
grid interval: 10px;
}

on your mind {
grid-column: 6 / span 7;
}

.Featured {
grid-column: 1 / span 5;
}

next to {
grid-column: 1 / span 2;
grid-row: 2/7;
}

.some products {
grid-column: 3 / span 8;
grid-row: 2/4;
}

.feature2 {
grid-column: 11 / span 2;
}

.feature3 {
grid-column: 11 / span 2;
grid-row: 4/5;
}

.bonus1 {
grid-column: 3 / span 2;
}

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

.bonus3 {
grid-column: 9 / span 2;
}

.bonus4 {
grid-column: 11 / span 2;
grid-row: 5/6;
}

footer {
grid-column: 3 / span 10;
} 

Consider ” bonus4 “. It starts at line 11 of the column and extends over two columns. Vertically, it starts at line 5 and goes down to line 6.

 .bonus4 {
grid-column: 11 / span 2;
grid-row: 5/6;
} 

Similarly, ” feature3 ” also begins at line 11 of the column and extends to two columns, but is placed between lines 4 and 5.

 .feature3 {
grid-column: 11 / span 2;
grid-row: 4/5;
} 

If you wanted to change the positions of these elements, you would not need to change the order of the markup at all; Instead, simply change the style statement. Making this change using a grid system or similar techniques could be difficult, but the CSS Grid layout makes it easy.

The layout of the CSS grid is important

This brief introduction to the CSS Grid Layout model hardly did justice to the specification. I have tried to explain what is the CSS Grid and provide some examples.

This layout model has the potential to change the way we present the content of e-commerce. This could lead to the development of new ecommerce design models and conventions. It helps designers add the diversity and complexity of the layout to a web design that they could use for printing.

-- Advertisements --
Advertisements