Стиль CSS в родительском элементе препятствует функционированию стилей в новом дочернем элементе

Question

Я учусь на искусстве и начинаю в веб-дизайне, и я создал собственный веб-сайт портфолио, следуя инструкциям моего учителя после изучения основ: https://codepen.io/fiona-wang/pen/poJjYYe

Затем Я нашел классную адаптивную сетку для фотографий, которую я хочу включить в свой сайт: https://codepen.io/fiona-wang/pen/rNaOPed

.grid {
  margin: 1rem;
  width: calc(100% - 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  grid-gap: 1rem; grid-auto-rows: 250px; grid-auto-flow: row dense;
  opacity: 0;
  animation: load-in 2000ms ease-out forwards;
  @media screen and (min-width: 382px) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  &.loading {
    animation-play-state: paused!important;
  }

Я пытался вставить ее в качестве дочернего элемента div в раздел портфолио, но его CSS стили (сетка, наведенная анимация, шрифт) вообще не работают. Кажется, это переписывается тем, как я стилизовал родительские элементы div (3 разных полноэкранных страницы), поэтому мои изображения в этой сетке растягиваются до 100% ширины вместо того, чтобы находиться в сетке. Анимация при наведении курсора не работает вообще, и я понятия не имею, почему.

Я пытался поместить его стили CSS внизу моих файлов CSS, чтобы дать им приоритет, и искал способы решения подобных проблем, но безрезультатно. Я был бы очень признателен за отзывы о том, как определить, в чем проблема, или, возможно, за ключевые слова о том, о каких вещах я должен узнать больше, прежде чем пытаться делать такие вещи.

Answer 1

Проблема в том, как настроена ваша сетка.

По сути, сейчас ваша сетка имеет только 1 столбец. Это в основном то, что говорит этот код:

grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

Если вы измените это просто на grid-template-columns: 2;, вы увидите, как это работает. Теперь у вас есть то, как вы хотите, чтобы это выглядело на мобильном телефоне.

Я предполагаю, что вам не хватает адаптивных стилей, так как у того, который вы связали, также есть

@media screen and (min-width: 382px) .grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }