CSS Grid Layout Helper

By : test

Language: html

Date Published: 2 weeks, 3 days ago

CSS Grid allows you to create two-dimensional layouts with rows and columns that adapt easily to different screen sizes.

Style : Dark Mode : Line Number: Download Font Size:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.item {
  background: #e3f2fd;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}
html
Login to see the comments