我想要像下面这样的布局，在 3 种不同尺寸的设备中。
我是 CSS 新手。如果能用flexbox或grid等新的布局技术来实现就更好了
-----------------
| |
----------------- | |
| | | |
| | | | -----------------
| | | | | |
|<div>row1</div>| |<div>row1</div>| |<div>row1</div>|
| | | | | |
| | | | |<div>row2</div>|
| | | | -----------------
|<div>row2</div>| | |
----------------- | |
|<div>row2</div>|
-----------------
我在底部段落使用“position:absolute”。但要确保父 div 有“position: relative”
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.mom {
display: flex;
flex-direction: column;
position: relative;
width: 300px;
height: 300px;
background: lightseagreen;
justify-content: center;
text-align: center;
align-items: center;
}
p {
background: gold;
width: 90%;
}
.sink {
position: absolute;
bottom: 0;
}
</style>
<body>
<div class="mom">
<p class="center">This is a paragraph.</p>
<p class="sink">This is a paragraph.</p>
</div>
</body>
</html>