3.3 #Objects.Grid The Grid Object
The Grid Object is similar to the Flex Object except that it can be controlled in two dimensions.
It has the structure of a list in that all items share the same container (unlike tables where cells might not share the same row), while at the same time appearing like a table with rows and columns.
The Grid Object has one column at 1fr, unless overridden.
Using CSS Grid properties and media queries, you can achieve a flexible and responsive table effect,
adjusting the number of columns and rows based on screen size and/or content.
See https://css-tricks.com/snippets/css/complete-guide-grid/ for details.
- author
- Chris Harvey
- updated
Example
- Burns & McDonnell Engineering
- DIS-TRAN Steel, LLC
- EDM International
- Electrical Consultants, Inc.
- Fabrimet Inc.
- Falcon Steel Company
- Sabre-FWT
- HDR
- Mitas Energy
- Power Consulting Associates, LLC
- Power Line Systems, Inc.
- Quanta Services
- ReliaPOLE Inspection Services
- Sabre-FWT
- SAE Towers
- TAPP Steel Poles
- Trinity Meyer Utility Structures
- TRC Engineers
- Underground Devices
- Valmont Newmark
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Grid.css"/-->
<ul class="o-List o-Grid">
<li class="o-List__Item o-Grid__Item">Burns & McDonnell Engineering</li>
<li class="o-List__Item o-Grid__Item">DIS-TRAN Steel, LLC</li>
<li class="o-List__Item o-Grid__Item">EDM International</li>
<li class="o-List__Item o-Grid__Item">Electrical Consultants, Inc.</li>
<li class="o-List__Item o-Grid__Item">Fabrimet Inc.</li>
<li class="o-List__Item o-Grid__Item">Falcon Steel Company</li>
<li class="o-List__Item o-Grid__Item">Sabre-FWT</li>
<li class="o-List__Item o-Grid__Item">HDR</li>
<li class="o-List__Item o-Grid__Item">Mitas Energy</li>
<li class="o-List__Item o-Grid__Item">Power Consulting Associates, LLC</li>
<li class="o-List__Item o-Grid__Item">Power Line Systems, Inc.</li>
<li class="o-List__Item o-Grid__Item">Quanta Services</li>
<li class="o-List__Item o-Grid__Item">ReliaPOLE Inspection Services</li>
<li class="o-List__Item o-Grid__Item">Sabre-FWT</li>
<li class="o-List__Item o-Grid__Item">SAE Towers</li>
<li class="o-List__Item o-Grid__Item">TAPP Steel Poles</li>
<li class="o-List__Item o-Grid__Item">Trinity Meyer Utility Structures</li>
<li class="o-List__Item o-Grid__Item">TRC Engineers</li>
<li class="o-List__Item o-Grid__Item">Underground Devices</li>
<li class="o-List__Item o-Grid__Item">Valmont Newmark</li>
</ul>
Source:
_o-Grid.less, line 7