为响应式 DIV 网格制作 CSS 布局

Question

我需要响应式 DIV 网格的 CSS，如此布局所示。

这是我迄今为止从第一个答案中所做的，这是一个很好的起点......

<div class="main-container">
    <div class="picture">
        <img class="picture" src="images/Ginger-004.jpg" width="300" alt="#">
    </div>
    <div class="text-container">
        <div class="header">
            <h1>CSS Layout for DIV Grid Puzzle</h1>
        </div>
        <div class="buttons">
            <div>By Company Pty Ltd</div>
            <div>Type: Commercial</div>
            <div>Price: $295</div>
        </div>
        <div class="buttons">
            <div><img src="images/buttons/home-page.jpg" border="0">  </div> 
            <div><img src="images/buttons/download.jpg" border="0"></div>
            <div><img src="images/buttons/buy-now.jpg" border="0"></div>
        </div>
        <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>        
    </div>
</div>

.main-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
}
.header {
    padding: 5px;
    text-align: center;
}
.picture {
    padding: 10px;
}
.text-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr 1fr 4fr 1fr;
}
.buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: min-content 1fr;
    text-align: center;
}
button {
    display: block;
    padding: 10px;
    text-align: center;
}

.message { 
    padding: 10px;
    text-align: justify;    
 }

但它没有响应。 它不会折叠以适合手机屏幕。

Answer 1

为此，需要将 VIEWPORT 添加到元标记中。 然后需要将@media(min-width) 添加到 CSS 中。

 .main-container { background: #f4f4f4; display: grid; } .picture { height: 70%; width: 90%; background: #333; margin: 5%; } .image { height: 0%; width: 100%; } .text-container { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 4fr 1fr; } .buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; } button { display: block; width: 90%; height: 90%; padding: 20px; } .message { padding: 10px 20px; } @media (min-width: 500px) { .main-container { grid-template-columns: 1fr; grid-template-areas: "picture" "text-container" } } @media (min-width: 800px) { .main-container { grid-template-columns: 1fr 2fr; grid-template-areas: "picture text-container" } }

 <div class="main-container"> <div class="picture"> <img class="image" src="#" alt="#"> </div> <div class="text-container"> <div class="header"> <h1>Heading</h1> </div> <div class="buttons"> <div><button>Button</button></div> <div><button>Button</button></div> <div><button>Button</button></div> </div> <div class="message"> <p>Message</p> </div> <div class="buttons"> <div><button>Button</button></div> <div><button>Button</button></div> <div><button>Button</button></div> </div> </div> </div>