制作一个无列表布局的网页

制作一个无列表布局的网页，通常指的是使用CSS Grid或Flexbox等现代布局技术，而不是传统的HTML列表（如<ul>和<li>）。这里简单解释一下这两种方法：

1. CSS Grid布局：它是一种二维网格系统，通过定义行（grid-template-rows）和列（grid-template-columns）来创建网格，并将元素放置到特定的单元格里。例如：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

在这个例子中，`.container`内的内容会被自动填充成最适合的大小，形成自适应的网格。

2. Flexbox布局：适用于一维的弹性伸缩容器，通过`display: flex`属性开启。可以控制项目之间的顺序、间距和对齐方式。例如：

.container {
  display: flex;
  justify-content: space-between; /* 控制项目间的间距 */
  flex-wrap: wrap; /* 如果项目超过一行，则换行 */
}

为了创建无列表布局，避免使用`<ul>`和`<li>`标签，直接将需要布局的内容（如段落 `<p>`、`<div>`等）作为容器的直接子元素。