Как закрепить изображение в заголовке с помощью CSS Grid?

Question

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

В конце концов, я хочу добавить сюда меню / навигацию, текст и нижний колонтитул. Есть ли хорошие шаблоны на основе CSS Grid, которые охватывают адаптивный дизайн для мобильных устройств? Рабочий jsfiddle: https://jsfiddle.net/cox/4cqpws2o/275/

Последняя ревизия, которая включает в себя начальную загрузку и переработку элементов «section» для использования div с class = «section» (необходимо после добавления начальной загрузки): https://jsfiddle.net/cox/4cqpws2o/578/

article {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 130px;
      grid-gap: 0px;
    }

section:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
section:nth-child(2) { grid-column: 2 / 5; grid-row: 1; z-index: 1; }
section:nth-child(3) { grid-column: 3 / 7; grid-row: 1; }

/*@media ( max-width: 500px ) {
   article { grid-template-columns: 100px; justify-content: center; }
   section:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
   section:nth-child(2) { grid-row: 3 / 5; grid-column: 1; }
   section:nth-child(3) { grid-row: 5 / 7; grid-column: 1; }
}*/

/* non-essential demo styles */
section:nth-child(1) {
  background-color: transparent;
  /*border: 2px solid red;*/
  justify-content: left;
}
section:nth-child(2) {
  background-color: transparent;
  /*border: 1px solid blue;*/
  justify-content: left;
}
section:nth-child(3) {
  background-color: transparent;
  border: 1px solid orange;
  justify-content: right;
  min-height: 130px;
  width: 485px;
}
section {
  display: flex;
  justify-content: center; /* default */
  align-items: center;
  font-size: 1.2em;
}
.header-title {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png');
  /*transform: scale(.5) translate(-50%, -50%);*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: bottom;
  background-position-y: top;
  min-height: 28px;
  min-width: 330px;
}
.header-left {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg');
  background-size: cover;
  background-position-x: bottom;
  background-position-y: left;
  min-height: 130px;
  min-width: 166px;
}
.header {  
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
  z-index: -1;
  min-height: 130px;
  /*display: flex;*/
}
.header-right {
  background-image: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 130px;
  min-width: 485px;
  background-position: right top;
}

<article class="header">
  <section><span class="header-left">1</span></section>
  <section><span class="header-title"></span></section>
  <section><span class="header-right"></span></section>
</article>

Answer 1

Вы перекрываете свой элемент сетки, используя определения grid-column, затем используете justify-content: start, который переопределяет стандартные протяженные столбцы в ячейке сетки, а затем используете фиксированную ширинудля элементов section.

Вместо этого я бы предложил сетку из трех столбцов с изображениями в правом и левом столбцах и текстом в середине:

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 130px;
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
}

section:nth-child(1) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg') no-repeat;
  background-size: cover;
}

section:nth-child(2) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png') no-repeat;
  background-size: contain;
  background-position: center;
}

section:nth-child(3) {
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg') no-repeat;
  background-size: cover;
}

<article class="header">
  <section></section>
  <section></section>
  <section></section>
</article>

---

Возможно, даже макет сетки является перебором - вы можете использовать фон, чтобы включить весь заголовок в один элемент (приведенная ниже демонстрация делает это мобильным, настроив свойство background-position):

article {
  height: 130px;
  background: url('https://res.cloudinary.com/adamcox/image/upload/v1557459731/header-test/TEST-SIGNx2.png') no-repeat,
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/LEFTx2.jpg') no-repeat, 
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/RIGHTx2.jpg') no-repeat, 
              url('https://res.cloudinary.com/adamcox/image/upload/v1557459316/header-test/BGPATTERNx2.jpg');
  background-size: 33.33% auto, contain, contain, cover;
  background-position: center, left center, 250px, center;
}

/* for desktop */
@media only screen and (min-width: 900px) {
  article {
    background-position: center, left center, right, center;
  }
}

<article></article>