css不用栅格不能横向排列吗

在开始谈论CSS不使用栅格是否不能横向排列之前，我们需要先了解一下栅格系统在CSS中的作用。

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

以上代码是一个简单的栅格系统，它将 .container 元素划分为12列，并且每一列都是1fr的宽度。通过这种方式，我们可以轻松地实现横向排列，并且在不同屏幕尺寸下，元素的排列也可以自适应调整。

那么，如果我们不使用栅格系统，是否就不能实现横向排列了呢？其实并不是这样。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(100% / 3 - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
}

以上代码使用了flex布局，结合calc()函数和margin属性，实现了一个简单的横向排列。其中，calc()函数可以计算出每个子元素的宽度，同时通过margin属性控制元素之间的间隔。

除此之外，我们还可以使用CSS中的浮动和inline-block属性实现横向排列。但需要注意的是，这些方法的兼容性较差，并且在某些情况下可能会出现莫名其妙的Bug。

总的来说，虽然栅格系统可以方便地实现横向排列，但并不是我们唯一的选择。在实际的开发中，我们应该根据具体情况选用最适合的布局方式。