サムネイルを正方形で並べる

<section class="photoWrap">
	<section class="photo">
		<section>
			<a data-fancybox="gallery01" data-caption="caption1" href="img01.webp">
				<img src="img01.webp" alt="" />
			</a>
		</section>
	</section>
	<section class="photo">
		<section>
			<a data-fancybox="gallery01" data-caption="caption2" href="img02.webp">
				<img src="img02.webp" alt="" />
			</a>
		</section>
	</section>
	<section class="photo">
		<section>
			<a data-fancybox="gallery01" data-caption="caption3" href="img03.webp">
				<img src="img03.webp" alt="" />
			</a>
		</section>
	</section>
	<section class="photo">
		<section>
			<a data-fancybox="gallery01" data-caption="caption4" href="img04.webp">
				<img src="img04.webp" alt="" />
			</a>
		</section>
	</section>
</section>

フレックスボックスを使用した方法

.photoWrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
	justify-content: center;
	.photo {
		position: relative;
		width: calc((100% - 6em) / 7);
		margin: 0 0.25em;
		@include xl {
			width: calc((100% - 4em) / 5);
		}
		@include md {
			width: calc((100% - 6em) / 7);
		}
		@include sm {
			width: calc((100% - 4em) / 5);
		}
		@include xs {
			width: calc((100% - 3em) / 4);
		}
		&::before {
			content:"";
			display: block;
			padding-top: 100%;
		}
		section {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			img {
				object-fit: cover;
				@include ie {
					object-fit: none;
					height: auto;
				}
				height: 100%;
				width: 100%;
				border: 1px solid #ccc;	
			}
		}
	}	
}

グリッドレイアウトを使用した方法

.photoWrap {
	margin-top: 1em;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 1em;
	@include xl {
		grid-template-columns: repeat(6, 1fr);
	}
	@include lg {
		grid-template-columns: repeat(5, 1fr);
	}
	@include md {
		grid-template-columns: repeat(4, 1fr);
	}
	@include sm {
		grid-template-columns: repeat(3, 1fr);
	}
	@include xs {
		grid-gap: 0.75em;
		grid-template-columns: repeat(2, 1fr);
	}
	.photo {
		position: relative;
		&::before {
			content:"";
			display: block;
			padding-top: 100%;
		}
		section {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			img {
				object-fit: cover;
				@include ie {
					object-fit: none;
					height: auto;
				}
				height: 100%;
				width: 100%;
				border: 1px solid #ccc; 
			}
		}
	}   
}