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

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.

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.

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 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.

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.

 



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


... // three other products





 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.

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

 



 <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. 

 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 



 Footer of left 



 Right footer 


 
 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 ” /> 

 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 
 

 Featured merchandise 



 Products 


 Feature 2 


 Feature3 


 Bonus1 


 Bonus2 


 Bonus3 


 Bonus4 





 <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. 

 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.