我需要一个网格来显示个人资料图片、姓名、冒号和消息。如果名称太长，名称和消息列应具有相同的宽度。否则，名称列应向左对齐，而不会产生大间隙，这与我当前的代码不同。
body {
background-color: rgba(66, 75, 84, 1); /* Set the background color */
color: rgba(255, 255, 255, 1); /* Set the text color to white */
font-family: Arial, sans-serif; /* Set the font to Arial */
}
.grid-container {
display: grid;
box-sizing: border-box;
grid-template-columns: 50px fit-content(50%) auto fit-content(50%); /* Adjust column sizes */
grid-gap: 10px;
row-gap: 30px; /* Reduce the gap between grid rows */
border: 2px solid red; /* Set the grid borders to red */
width: 100%; /* Set the grid width */
height: 100%; /* Set the grid height */
}
.grid-container .profile-picture {
display: flex;
align-items: center; /* Vertically center the profile picture */
align-self: center; /* Align the profile picture to the start */
}
.grid-container .profile-picture img {
width: 50px; /* Set a fixed width for the profile picture */
height: 50px; /* Set a fixed height for the profile picture */
object-fit: cover; /* Ensure the image covers the area without distortion */
border-radius: 50%; /* Make the profile pictures round */
}
.grid-container .name {
color: rgba(15, 206, 128, 1); /* Make the name green */
word-wrap: break-word; /* Ensure long names wrap to a new line */
overflow-wrap: break-word; /* Ensure long names wrap to a new line */
text-align: left; /* Align text to the left */
min-width: 0; /* Allow the name to shrink */
flex: 1; /* Allow the name to grow and shrink */
}
.grid-container .colon {
color: rgba(15, 206, 128, 1); /* Make the colon green */
text-align: left; /* Align text to the left */
white-space: nowrap; /* Prevent the colon from wrapping */
}
.grid-container .text {
word-wrap: break-word;
overflow-wrap: break-word; /* Ensure long text wraps to a new line */
text-align: left; /* Align text to the left */
min-width: 0; /* Allow the text to shrink */
flex: 1; /* Allow the text to grow and shrink */
}
.grid-container div {
display: flex;
align-items: center; /* Vertically center the content */
min-width: 0; /* Allow the div to shrink */
}<body>
<div class="grid-container">
<div class="profile-picture"><img src="pfp.jpg" alt="Profile Picture"></div>
<div class="name">Name</div>
<div class="colon">:</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum, ea ipsum ipsam maiores nulla possimus sit rem placeat molestiae culpa, pariatur cum fugit praesentium sequi corrupti reiciendis eaque deserunt.
Cupiditate laboriosam reprehenderit commodi consectetur temporibus culpa expedita fugiat possimus at iure adipisci quos corporis animi pariatur vero, distinctio exercitationem placeat blanditiis magnam recusandae dignissimos aspernatur! Nobis accusantium libero doloribus.
Nam ratione vitae eius veritatis nulla temporibus molestias neque odio a itaque minima, error iste, similique voluptate pariatur porro, impedit quibusdam libero nobis! Distinctio cupiditate deserunt, dicta eius aperiam id!
Saepe totam ducimus ab praesentium rem officia repellendus ipsa debitis nostrum quam, eveniet nihil. Blanditiis ab aspernatur eius eligendi explicabo id ea laboriosam nihil laborum, quo, tempore accusantium dolorum beatae!
Obcaecati eum ea amet assumenda veniam ex, tempore commodi dolorum corrupti ratione accusamus quibusdam delectus praesentium, molestias repudiandae? Quae officiis adipisci quidem consequatur eaque obcaecati enim quam minus mollitia molestias.
Ullam ea accusamus unde fuga, officiis ratione optio molestiae qui animi omnis, cumque doloribus reiciendis fugit veniam recusandae minima totam laboriosam fugiat pariatur perspiciatis repellat tempore laudantium iure. Enim, at.
Recusandae assumenda magnam cupiditate vel maiores eius nulla labore autem animi rerum nobis fugiat consequatur illum adipisci dolorum voluptas distinctio, doloribus eligendi eum cum. Asperiores voluptate ducimus tenetur aut adipisci.
Earum corporis nesciunt eaque dolorem doloremque! Recusandae reiciendis fuga molestiae? Possimus alias ipsa sint! Commodi, nemo nisi rem odio dolorum suscipit. Temporibus enim suscipit eveniet nobis doloribus voluptates natus nisi!
Temporibus ab officia dicta quos. Eaque, consectetur! Voluptates inventore modi quasi commodi libero numquam, possimus maiores eligendi, esse cum itaque? Dignissimos eius eos beatae harum voluptatem! Laudantium necessitatibus optio cum?
Necessitatibus exercitationem inventore rerum praesentium porro possimus consequatur officia illum perspiciatis repellat nobis, fuga maxime obcaecati, assumenda incidunt rem deserunt corporis minima! Modi, tenetur magni delectus veniam explicabo aperiam ipsum.</div>
<div class="profile-picture"><img src="pfp.jpg" alt="Profile Picture"></div><div class="name">Name</div><div class="colon">:</div><div class="text">Text</div>
</div>
</body>我用过：
grid-template-columns: 50px fit-content(50%) 0 fit-content(50%); 代替：
grid-template-columns: 50px fit-content(50%) auto fit-content(50%);