Я использую display: grid вместе с display: flex для создания макета, подобного тому, который называется 'Normal' на изображении ниже. У меня также есть некоторый JavaScript, который позволяет мне свернуть синие и голубые div. У меня очень трудное время при создании медиа-запроса, который позволит мне расположить все элементы div справа, как на картинке. Красный div расширяется до размера его содержимого, в то время как синий div получает переполнение: прокрутка.
Это изображение немного упрощает реальную ситуацию; У меня на самом деле тоже есть что-то посередине страницы.
Вот урезанная версия моего html (я знаю, что сетка немного отличается от той, что на картинке выше):
<html>
<head>
<title>Width Test</title>
<link rel="stylesheet" href="ResponsiveWidth.css">
</head>
<body>
<div class="left">
<div class="one"><p>One</p>
Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.
Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.
Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
</div>
<div class="two"><p>Two</p>
Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.
Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.
Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
</div>
</div>
<div class="right">
<div class="three"><p>Three<p>
Bacon ipsum dolor amet andouille pork belly shankle bacon landjaeger, cupim flank meatball t-bone capicola leberkas. Tenderloin short loin venison ribeye drumstick, corned beef pork belly pork chop jerky kielbasa salami cupim. Drumstick ham hock filet mignon rump doner. Ham tri-tip venison hamburger rump, jowl ball tip bresaola tenderloin jerky. Chicken cow salami, chuck pancetta tail swine pork loin pork chop turkey beef ribs capicola boudin.
Meatball flank t-bone pancetta spare ribs landjaeger boudin pork chop leberkas jerky alcatra meatloaf swine ball tip. Pork chop meatball beef ribs ribeye t-bone. Tongue pig flank shoulder alcatra doner ground round kielbasa jerky bresaola beef swine. Tenderloin swine ribeye andouille tongue drumstick fatback.
Ball tip shankle brisket shoulder salami bresaola leberkas alcatra venison short ribs meatloaf ground round pastrami t-bone flank. Chuck bacon bresaola alcatra t-bone ribeye shank drumstick pork filet mignon ham hock burgdoggen chicken doner. Tenderloin shoulder spare ribs, burgdoggen hamburger sirloin cupim pork loin turkey short loin tail jowl ham hock. Sausage jerky alcatra, ground round cupim chicken short loin turducken bresaola porchetta beef ribs capicola pastrami meatloaf. Rump bacon doner buffalo short loin picanha drumstick cupim.
</div>
</div>
</body>
</html>
И мой css:
body {
min-height: 100%;
display: grid;
height: 100%;
margin: 0;
width: 100%;
grid-template-columns: repeat(3, 300px);
grid-template-rows: 600px;
overflow: hidden;
}
.left, .right {
grid-row-start: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.left {
grid-column: 1/2;
}
.right {
grid-column: 3/4;
}
.one, .two, .three {
padding: 20px;
overflow: scroll;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: #00ffff;
}
/* Media Queries */
@media screen and (max-width: 960px) {
.left {
grid-column: 3/4;
}
}
Я пытался поместить элементы div в одно и то же место, используя grid-столбец, но они просто перекрывают друг друга, а не разделяют пространство. Как мне это сделать?