使用CSS grid布局时，如何同时对图片和文字进行对齐？

在使用CSS Grid布局时，同时对图片和文字进行对齐非常直观，你可以这样做：

1. 首先，创建一个Grid容器，给它指定`display: grid;`，并设置网格列数和行数，以及间距(`grid-template-columns`, `grid-template-rows`)。

2. 然后，你可以为每个单元格(`grid-item`)设置定位，例如：
- 对于图片和文字都位于同一行的情况，你可以将图片放入一个`grid-column: span N`的单元格中，`N`是跨越的列数，而文字则放在旁边的一个固定大小的单元格里，使用`justify-self`对齐文字，比如`justify-self: center;`使其居中。

   .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
   }
   
   .grid-item img {
     width: 100%;
     object-fit: cover;
   }
   
   .grid-item.with-text {
     justify-self: space-between;
   }

3. 如果需要图片在一行上，文字在另一行，可以分别对两个元素设置`grid-row`和调整`grid-auto-rows`，以确保文字自动填充剩余空间。

   .grid-container {
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
   }