.dotted-grid {
  display: grid;
  grid-template-areas: 
    "logo . . search"
    "nav nav nav nav"
    "content content . sidebar"
    "footer footer footer footer";
  grid-template-rows: 60px 40px 1fr 50px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  height: 350px;
  background: #e9ecef;
  padding: 10px;
  border-radius: 5px;
}

.dotted-grid > div {
  background: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
}

.dotted-grid .logo { grid-area: logo; background: #28a745; }
.dotted-grid .search { grid-area: search; background: #ffc107; color: #212529; }
.dotted-grid .nav { grid-area: nav; background: #6c757d; }
.dotted-grid .content { grid-area: content; background: #007bff; }
.dotted-grid .sidebar { grid-area: sidebar; background: #fd7e14; }
.dotted-grid .footer { grid-area: footer; background: #dc3545; }