UI Layout Generator

Grid Controls
3
3
10px
10px
Click on a grid item to edit its properties
Grid Preview
1
2
3
4
5
6
7
8
9
Generated HTML with CSS
CSSSCSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-container__item-1">Item 1</div>
    <div class="grid-container__item-2">Item 2</div>
    <div class="grid-container__item-3">Item 3</div>
    <div class="grid-container__item-4">Item 4</div>
    <div class="grid-container__item-5">Item 5</div>
    <div class="grid-container__item-6">Item 6</div>
    <div class="grid-container__item-7">Item 7</div>
    <div class="grid-container__item-8">Item 8</div>
    <div class="grid-container__item-9">Item 9</div>
  </div>
</body>
</html>

/* Grid Layout CSS */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px 10px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

.grid-container__item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding: 20px;
  background-color: #3498db;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-1 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  padding: 20px;
  background-color: #2ecc71;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-2 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  padding: 20px;
  background-color: #f1c40f;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-3 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  padding: 20px;
  background-color: #e74c3c;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-4 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  padding: 20px;
  background-color: #9b59b6;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  padding: 20px;
  background-color: #1abc9c;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-6 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-7 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  padding: 20px;
  background-color: #e67e22;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-7 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-8 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  padding: 20px;
  background-color: #34495e;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-8 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.grid-container__item-9 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  padding: 20px;
  background-color: #7f8c8d;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .grid-container__item-9 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}