Grid display using DIV and CSS

by Ricardo Zambon

HTML

<div class="table">
  <div class="header">
    <div class="cell">Header 1</div>
    <div class="cell w-5">Header 2</div>
    <div class="cell">Header 3</div>
    <div class="cell">Header 4</div>
    <div class="cell">Header 5</div>
  </div>
  
  <div class="content">
		<div class="row">
			<div class="cell">Row 1 - 1</div>
			<div class="cell w-5">Row 1 - 2</div>
			<div class="cell">Row 1 - 3</div>
			<div class="cell">Row 1 - 4</div>
			<div class="cell">Row 1 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 2 - 1</div>
			<div class="cell w-5">Row 2 - 2</div>
			<div class="cell">Row 2 - 3</div>
			<div class="cell">Row 2 - 4</div>
			<div class="cell">Row 2 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 3 - 1</div>
			<div class="cell w-5">Row 3 - 2</div>
			<div class="cell">Row 3 - 3</div>
			<div class="cell">Row 3 - 4</div>
			<div class="cell">Row 3 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 4 - 1</div>
			<div class="cell w-5">Row 4 - 2</div>
			<div class="cell">Row 4 - 3</div>
			<div class="cell">Row 4 - 4</div>
			<div class="cell">Row 4 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 4 - 1</div>
			<div class="cell w-5">Row 4 - 2</div>
			<div class="cell">Row 4 - 3</div>
			<div class="cell">Row 4 - 4</div>
			<div class="cell">Row 4 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 4 - 1</div>
			<div class="cell w-5">Row 4 - 2</div>
			<div class="cell">Row 4 - 3</div>
			<div class="cell">Row 4 - 4</div>
			<div class="cell">Row 4 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 4 - 1</div>
			<div class="cell w-5">Row 4 - 2</div>
			<div class="cell">Row 4 - 3</div>
			<div class="cell">Row 4 - 4</div>
			<div class="cell">Row 4 - 5</div>
		</div>

		<div class="row">
			<div class="cell">Row 4 - 1</div>
			<div class="cell w-5">Row 4 - 2</div>
			<div class="cell">Row 4 - 3</div>
			<div class="cell">Row 4 - 4</div>
			<div class="cell">Row...

CSS

html, body {
  height: 98%;
  max-height: 98%;
}

.table {
  border: 1px solid;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  max-height: 100%;
}

.header {
  grid-area: "header";
  background-color: lightgray;
}

.content {
	overflow: overlay;
}

.row, .header {
  display: grid;
  grid-template-columns: 1fr 5rem 1fr 1fr 1fr;
}

.cell {
  border: 1px solid;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}