如何制作一个CSS列表框折叠窗口大小？

我不太擅长CSS，所以我甚至不知道从哪里开始。。。但是，我需要快速创建一个对象列表，默认情况下，该列表将显示一行4个对象（以及对象所需的任意多行），但是，当窗口大小较小时，如果4个对象不适合，它们将自动重新排列为每行2个

有人有CSS代码的链接吗？我甚至不知道它叫什么，所以我不知道该搜索什么

谢谢

CSS

#welcomemessage {
position: relative;
top: 5px;
left: 10px;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 340px;
padding-left: 50px;
z-index: 1;

}

#maincontent {
position: relative;
display: block;
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 700px;
padding-left: 50px;
z-index: 1;
}

.appbox {
position: relative;
background-color: rgba(200, 200, 200, 0.6);
width: 120px;
height: 120px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
margin-right: 25px;
margin-bottom: 25px;
float: left;
}

HTML

   <div id='welcomemessage'>
         Welcome to InfraNodus, <%= user.name %>. 
     Using this platform you can convert any text into network. 
    Try out our apps to see how it works.
     </div>

    <div id='maincontent'>
        &nbsp;<br>&nbsp;<br>
      <div class="appbox">Here we go</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>



    </div>

欢迎来到InfraNodus。
使用此平台，您可以将任何文本转换为网络。
试用我们的应用程序，看看它是如何工作的。



我们开始
又来了
又来了
又来了
又来了

您必须使用

ul{
显示：块；
宽度：100%；
保证金：0；
填充：0；
列表样式：无；
}
李{
浮动：左；
宽度：22%；
利润率：0.2%10px 0；
填充：30px0；
边框：1px实心#000；
文本对齐：居中；
}
@介质（最大宽度：640像素）{
李{
宽度：47%；
}
}

这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团
这是一个集团

您知道如何将div中的文本垂直居中吗？您的意思是什么？文本已垂直和水平居中