向Grid布局中添加图片导致其他元素布局错乱，如何修复？

我是CSS新手，正在学习搭建布局。用Grid布局时，在sidebar的div里加图片并调整尺寸后，右侧blog元素的布局间距完全错乱；移除图片后布局恢复正常。确认图片没放错div，也调过Grid属性，但没找到原因，附上HTML和CSS代码：

CSS代码 #

nav {
  text-align: center;
  width: 50;
  font-family: Helvetica, sans-serif;
}

body {
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: 3fr;
}

.blog {
  grid-template-rows: 1fr;
  grid-column: 3;
  width: 80%;
  gap: inherit;
  padding: 30px;
  border: 2px solid rgb(79 185 227);
  border-radius: 5px;
  margin: 20px;
}

.sidebar {
  grid-column: 1;
  width: 400px;
  border-right: 1px solid #999;
  margin-top: 20px;
}

.sidebar p {
  font-family: Monospace, sans-serif;
  padding: 10px;
}

.sidebar img {
  width: 70%;
  margin-left: 30px;
}

.title {
  text-align: center;
  width: 50;
  font-size: 120%;
}

ul {
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  background-color: #8a5f88;
  height: 50px;
}

li {
  text-align: center;
  display: inline;
  margin-bottom: 10px;
}

li a {
  display: inline-block;
  color: white;
  font-family: Monospace, sans-serif;
  text-align: center;
  padding: 13px 29px;
  font-size: 140%;
  text-decoration: none;
}

li a:hover {
  background-color: #e7b4ed;
}

h2 {
  font-family: Monospace, sans-serif;
  font-size: 230%;
}

footer {
  background-color: #8a5f88;
  color: white;
  font-family: Monospace, sans-serif;
  font-size: 120%;
}

HTML代码 #

<header>
  <p class="title">will have header here with the blog title</p>
  <nav>
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="alarry.html">About</a></li>
      <li><a href="gallery.html">Gallery</a></li>
  </nav>
  </ul>
</header>
<div class="container">
  <div class="sidebar">
    <h2>Welcome to the Blog!</h2>
    <p>I can introduce myself here. It will be one of the first things people see when they enter the website. I can have a photo of myself and a short description, and possibly links to my socials as well.</p><img src="https://picsum.photos/200/300" class="ren" alt="Fireworks at the Faire"></p>
  </div>
  <div class="blog">
    <h2>Example Blog Title</h2>
    <p> This would begin the body of the blog post. Here I can insert photos, use headings, and write to make a blog post. I'll just have to style and position it all a certain way.</p>
  </div>

  <div class="blog">
    <h2>Second Blog Post Example</h2>
    <p>I would keep a pretty standard form and make the page simply scrollable for a while (then eventually figure out how to make more pages if I write more).</p>
  </div>
  <div class="blog">
    <h2>Another Blog Post</h2>
    <p>And that's pretty much it, I want to start very simple and just focus on making the blog posts simple, well styled, and easy to read.</p>
  </div>
</div>
<footer>
  <p>Copyright @2023 Julia Bruns</p>
</footer>

1. Grid列配置错误：.container只设置了1列（grid-template-columns: 3fr），但.blog指定了grid-column: 3，浏览器会自动创建空列填补位置，图片加入后sidebar高度增加，空列的占位逻辑被触发，布局混乱更明显。
2. 图片样式导致溢出：.sidebar img的margin-left:30px加上自身70%宽度，容易超出sidebar的400px宽度，引发容器偏移，间接干扰blog元素的位置计算。
3. HTML标签闭合错误：sidebar里的<p>标签嵌套图片后多了一个</p>，浏览器解析DOM结构出错，进一步打乱布局渲染。

1. 修正Grid布局结构 #

调整.container的列配置，明确划分sidebar和blog区域：

.container {
  display: grid;
  /* 1列固定400px的sidebar，剩余空间给blog */
  grid-template-columns: 400px 1fr;
  gap: 20px; /* 增加间隙避免元素拥挤 */
}

同时移除.blog里无效的属性，让它自动填充第二列：

.blog {
  /* 移除 grid-template-rows: 1fr; 和 grid-column: 3; */
  width: 90%;
  padding: 30px;
  border: 2px solid rgb(79 185 227);
  border-radius: 5px;
  margin: 20px auto; /* 水平居中 */
}

2. 调整图片样式 #

避免图片超出sidebar宽度，改为水平居中：

.sidebar img {
  width: 70%;
  margin: 0 auto;
  display: block; /* 转为块级元素才能用margin:auto居中 */
}

3. 修复HTML标签错误 #

修正sidebar里的<p>标签闭合问题：

<div class="sidebar">
  <h2>Welcome to the Blog!</h2>
  <p>I can introduce myself here. It will be one of the first things people see when they enter the website. I can have a photo of myself and a short description, and possibly links to my socials as well.</p>
  <img src="https://picsum.photos/200/300" class="ren" alt="Fireworks at the Faire">
</div>

4. 补充细节优化 #

• 给.sidebar加内边距，避免内容贴边：

.sidebar {
  grid-column: 1;
  width: 400px;
  border-right: 1px solid #999;
  margin-top: 20px;
  padding: 0 20px;
}

• 修正nav和.title里缺失单位的width属性：

nav {
  text-align: center;
  width: 100%;
  font-family: Helvetica, sans-serif;
}

.title {
  text-align: center;
  width: 100%;
  font-size: 120%;
}

内容的提问来源于stack exchange，提问作者jabphoto99