fluid grid with display table

In this example below you will see how to do a fluid grid with display table with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ingosr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ingosr ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS - fluid grid /w display table</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row row-y rtl">
  <div class="col">cell1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam libero laudantium, rerum deserunt recusandaias voluptas quis, beatae maxime consequuntur dolor!</div>
  <div class="col">cell2</div>
  <div class="col">cell3</div>
  <div class="col">cell4</div>
  <div class="col">cell5</div>
  <div class="col">cell6</div>
</div>
<div class='row'>
  <div class="col"> 
    <div class="row">
      <div class="col">
        <div class="content">cell1</div>
      </div>
      <div class="col">cell2</div>
      <div class="col">cell3</div>
      <div class="col">cell4</div>
    </div>
  </div>
  <div class="col"> cell2 </div>
</div>
bla
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ingosr/fluid-grid-with-display-table-jqYVaB */

.co-l::after {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: purple;
}

@media (min-width: 30em) {
  .row { 
    width: 100%; 
    display: table; 
    /* fix the table and the cells to the first row of cells*/
    table-layout: fixed;
    /* irrelevant */
    background: red;
    border-collapse: collapse;
  }
  .col { 
    display: table-cell; 
    position: relative;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid green;
  }
}
.row-y {
  background: yellow;
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
.content {
  background: fuchsia;
  margin: 10px;
}

Comments