Вот несколько примеров макетов веб-сайтов вместе с их кодом:

1. Базовый макет в две колонки:
   HTML:

   <div class="container">
   <div class="sidebar">
   <!-- Sidebar content -->
   </div>
   <div class="main-content">
   <!-- Main content -->
   </div>
   </div>

   CSS:

   .container {
   display: flex;
   }
   .sidebar {
   flex: 1;
   }
   .main-content {
   flex: 2;
   }

2. Макет в три столбца:
   HTML:

   <div class="container">
   <div class="sidebar">
   <!-- Sidebar content -->
   </div>
   <div class="main-content">
   <!-- Main content -->
   </div>
   <div class="sidebar">
   <!-- Sidebar content -->
   </div>
   </div>

   CSS:

   .container {
   display: flex;
   }
   .sidebar {
   flex: 1;
   }
   .main-content {
   flex: 2;
   }

3. Макет сетки:
   HTML:

   <div class="container">
   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
   <div class="item">Item 4</div>
   </div>

   CSS:

   .container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   }
   .item {
   /* Styles for each item */
   }

4. Полноэкранный макет:
   HTML:

   <div class="container">
   <div class="content">
   <!-- Content goes here -->
   </div>
   </div>

   CSS:

   html, body {
   height: 100%;
   margin: 0;
   }
   .container {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   }
   .content {
   flex: 1;
   }

HTML:

<div class="header">
<!-- Header content -->
</div>
<div class="content">
<!-- Scrollable content -->
</div>

CSS:

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
}
.content {
margin-top: 50px; /* Height of the header */
/* Styles for scrollable content */
}

Это всего лишь несколько примеров макетов веб-сайтов, но существует гораздо больше возможностей в зависимости от ваших конкретных требований. Не забудьте настроить код в соответствии со своими потребностями.