감동적인 일
grid-area가 가장 높습니다.스펀지 패드 대응은 3행부 요소만 있으면 된다.

순서:제한된 HTML 구성

wordpress의 블로그 보도 내의 간소화 표기를 이용한 사건이 있다.
애초 SEO를 의식하면서 다른 페이지에서도 모듈적으로 사용한다는 방침이어서 상당히 복잡한 표기였다.
이는 보도 대량 생산 단계에 들어가 조작상의 번거로움을 줄이기 위해 wordpress의 입력 기능을 표시를 통해 입력할 수 있는 HTML 구조로 동시에 변경했다.
PDCA가 전달한 증거입니다.

변경 전 HTML

SEO 대책과 함께 웹 사이트 구조를 모듈화한 HTML
변경 전 HTML

<div class="wrapper">
    <ul>
        <li>
            <article>
                <p>
                    <a href="#">
                    <img src="http://placekitten.com/g/140/20" alt="サムネ画像">
                    </a>
                </p>
                <div>
                    <h3>
                        <a href="#">一行の件名</a>
                    </h3>
                    <blockquote>
                        <p>３行程度の抜粋文章</p>
                    </blockquote>
                </div>
            </article>
        </li>
    </ul>
</div>

변경된 HTML

.wapper 아래에 표기 장치를 채택하였다.
변경된 HTML

<div class="wrapper">
    <h3><a href="#">一行の件名）</a></h3>
    <a href="#"><img src="http://placekitten.com/g/140/20" alt="サムネ画像"></a>
    <blockquoe>
        <p>３行程度の抜粋文章</p>
    </blockquote>
</div>

마크 다운

표시하면 이런 느낌이죠.
WordpressAddQuickTag 플러그인.wrapper의 div 포위 작업 이미지를 사용합니다.
마크 하강ver

<div class="wrapper">
### [一行の件名](ジャンプ先URL)
[画像URL]（ジャンプ先）
> ３行程度の抜粋文章
</div>

이렇게 되면 코드량이 가장 낮아진다.
p가 없어도 되는데 그것 때문에 편해서 그냥 놔둬요.

파:grid가 채택한 경과

하지만 이 녀석은 컴퓨터에는 왼쪽 열과 오른쪽 열의 이미지를, 스마트폰에는 세로 3줄의 1열 포석을 보였다.
변경 전에 display:table;를 사용하여 배치를 진행했습니다.

【벽1】Table 조립불가

태그 하락에 대비해 태블릿 조합을 시도하면 증가tr가 없기 때문에 PC/스마트폰 레이아웃 전환이 불가능하다.

[벽2] flex 귀찮아.

그럼 flex는요?1행+2행의 2열은 힘들다는 것을 나타낸다.

↑ flexbox-playground씨

[대책 타파] 그럼 grid.

float 지금은 구현됐지만 플랫에서 레이아웃을 하기 싫어 CSS Grid(이하 Grid)에 도전하기로 했다.
Corder'sHigh2018 분위기가 뜨거운가 봐요.
나는 집안 사정으로 그 전에 회의장을 떠났기 때문에 매우 유감스럽다.
Can I use...에서 찾아보니 IE 10, 11을 제외하고는 모두 대응할 수 있으니 자세한 상황을 확인하지 않으면 먼저 사용해 보아라.
※ IE 는 뒤에 서술해야 합니다

일단 해보세요.

우선 번거로운 PC의 2열 표시입니다.
익숙하지 않아서 비추었어요. 아레아는 1-1과 2-1, 아레비는 1-2, 아레나는 2-2로 가리키면서 했어요.

css

.wrapper {
  display: grid;
  grid-template-areas: 'areaA areaB' 'areaA areaC';
  grid-template-columns: 120px 1fr;// 画像横最大120px
  grid-template-rows: 3em 1fr;// 一行件名の行間1.5em（で高さとする）
}

.wrapper > h3 {
  grid-area: areaB;
}
.wrapper > a {
  grid-area: areaA;
}
.wrapper > blockquote {
  grid-area: areaC;
}

뜻밖에 완성했다.
미디어 질의를 사용하여 이 열을 열로 표시합니다.
나는 비추는 것을 다시 설정하는 것이 매우 번거롭다고 생각한다.

급: 문제 해결

스마트폰의 매핑은 areaA가 1, areaB가 2, areaC가 3이다.
3'이 늘어나도 힘들 것 같다.

grid-template-are네'areaA' 'areaB' 'areaC'.

grid-template-columns 1열인데 1fr 괜찮아요?auto도 가능합니다.

grid-template-rows는 이미지가 세로max120px, 첫 번째 줄의 프로젝트 -> 줄 거리 0.5em의 높이, 발췌문 -> 나머지 높이 120px 2em 1fr

css

// スマホサイズ
.wrapper {
  display: grid;
  grid-template-areas: 'areaA' 'areaB' 'areaC';
  grid-template-columns: 1fr;
  grid-template-rows: 120px 2em 1fr;
}
@media screen and (PCサイズ) {
  .wrapper {
    grid-template-areas: 'areaA areaB' 'areaA areaC';
    grid-template-columns: 120px 1fr;
    grid-template-rows: 3em 1fr;
  }
}

.wrapper > h3 {
  grid-area: areaB;
}
.wrapper > a {
  grid-area: areaA;
}
.wrapper > blockquote {
  grid-area: areaC;
}

그게, 부모 요소만 설정하면 완성이야.
나는 여기서 서브요소grid-area의 기호가 변하지 않아도 된다는 것을 알아차렸다.
응, 가벼워.
그리고 검사도 대충 끝내고
잘 부탁드립니다.

IE11 대응 정보

autooprefixer가 방법을 생각해 드릴게요.v8.6 이상, 11월 말 현재 v9.3.1 추천합니다.
IE10을 잊으십시오.
- CSS Grid in IE: Duplicate area names now supported! | CSS-Trick