Отзывчивый CSS Grid - PullRequest
Новая
       9

Отзывчивый CSS Grid

0 голосов
/ 04 января 2019

Может кто-нибудь помочь мне добавить отзывчивый CSS в эту сетку? Я хочу, чтобы каждый элемент сетки размещался на мобильном устройстве.

https://codepen.io/benpjam/pen/ebMJRW

HTML

Платные медиа

Онлайн платные медиа могут стать мощной стратегией для привлечения потенциальных клиентов и продаж. Благодаря оптимизации накопителей данных и постоянному управлению платные носители также могут быть очень рентабельным вариантом для рекламодателей.

Платные медиа

Онлайн платные медиа могут стать мощной стратегией для привлечения потенциальных клиентов и продаж. Благодаря оптимизации привода данных и постоянному управлению платные носители также могут быть очень экономически выгодным вариантом для рекламодателей.

SEO

Поисковая оптимизация - это больше, чем ключевые слова на вашем сайте. От локальной цитаты до метаданных и разметки схемы ваша стратегия SEO должна быть технической и продуманной в своем подходе.

Веб-разработка

Мы создаем привлекательные, высокопроизводительные веб-сайты, созданные с нуля. Никаких шаблонов или формочек для печенья - просто потрясающие, отзывчивые, оптимизированные для конверсии веб-сайты и целевые страницы.

Данные и аналитика

Данные должны влиять на каждое решение, которое принимается в вашей маркетинговой стратегии. Имея под рукой нужные KPI, мы разберем каждую точку данных, чтобы понять, как сделать наиболее эффективную оптимизацию.

CSS 

    .container {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-content:center;
}

.lawyer-form {
  background-color:blue;
  min-height: 500px;
  grid-column: 1/3;
  grid-row:1/5;
}

.paid-media {
  background-color:red;
  min-height:100px;
  grid-column:3/5;
    grid-row:1/3;
  padding:20px;
}

.seo {
  background-color:green;
  min-height:100px;
  grid-column:3/5;
    grid-row:3/5;
  padding:20px;
}

.web-dev {
  background-color:yellow;
  min-height:100px;
  grid-column:5/7;
    grid-row:1/3;
  padding:20px;
}

.analytics {
  background-color:orange;
  min-height:100px;
  grid-column:5/7;
    grid-row:3/5;
}

@media only screen and (max-width: 980px) {
  .container {
  display:grid;
  grid-template-columns:1fr;
}

}

1 Ответ

0 голосов
/ 04 января 2019

Бен,

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

Надеюсь, это поможет.

Вы можете найти мои наценки css здесь: 

.lawyer-form {
 background-color:blue;
 min-height: 500px;
 grid-column: 1/3;
 grid-row:1/5;
}
.paid-media {
 background-color:red;
 min-height:100px;
 grid-column:3/5;
 grid-row:1/3;
 padding:20px;
}

.seo {
 background-color:green;
 min-height:100px;
 grid-column:3/5;
 grid-row:3/5;
 padding:20px;
}

.web-dev {
 background-color:yellow;
 min-height:100px;
 grid-column:5/7;
 grid-row:1/3;
 padding:20px;
}

.analytics {
 background-color:orange;
 min-height:100px;
 grid-column:5/7;
 grid-row:3/5;
}

@media only screen and (min-width: 980px) {
 .container {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-content:center;
}}

https://codepen.io/parisotdev/pen/oJqxdg

...