xmeter/css/src/_o-Grid.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  _o-Grid.less
\*################################*/


// 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 <code>1fr</code>, 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.
// <header><dl>
//   <dt>author</dt>  <dd>Chris Harvey</dd>
//   <dt>updated</dt> <dd><time>2017-06-09</time></dd>
// </dl></header>
//
// 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 &amp; 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>
//
// Weight: 3
//
// Styleguide Objects.Grid
.o-Grid {
  display: grid;
  line-height: inherit; // override lh-z on text-level elements
  grid-template-columns: 1fr;
}

.o-Grid__Item {
  line-height: inherit; // override lh-z on text-level elements
}