我得到了这个代码，它假设是一个页脚（我很欣赏建议，因为我是网站开发的新手）。
https://jsfiddle.net/rvcm4bwn/
.content {
max-width: auto;
margin: auto;
}
假设将ul的3个元素居中并且它在大多数情况下都有效，但是当屏幕非常大时（1900我认为，也尝试更多）然后它会中断并且它不再保持居中。
奖金背景
在尝试学习的同时，我下载了页脚模板以包含在我的网站中，但它们是不必要的复杂。我想要的只是3个居中的部分/列/ div /无论如何填充数据。如果您调整浏览器大小或从手机输入，请确保它们移动到单个列。
这或多或少是我想要的网站布局：http://themes.89elements.com/definity-html/index-agency2-op.html
经过几个小时的研究，我仍然无法弄清楚浮动内容的复杂性是否值得，如果我应该学习网格布局，而不是html5。或者废弃我到目前为止所做的事情并开始其他事情。我甚至考虑用旧的学校表格格式化我的整个网站，以避免div或css头痛。
编辑：这适用于Flask静态网站，但这无关紧要。
答案 0 :(得分：0)
您的问题的核心是此行中指定的网格行为：
grid-template-columns: repeat(auto-fill,minmax(400px, 1fr));
documentation for the property itself以及repeat() function used to set the value。如您所见，您的选择是：
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
实现持续扩展的最简单选择是从auto-fill切换到auto-fit：
grid-template-columns: repeat(auto-fit,minmax(400px, 1fr));