为响应式 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>