Wordpress記事一覧の列数のレスポンシブデザインのCSSでの実現方法

Question

###実現したいこと
【実現したいこと】
Wordpressの投稿記事一覧画面で、以下のレスポンシブデザインを実現したいです。
①パソコンの場合
・投稿記事が表示が、最大５列になる。
・ブラウザの縮小に応じて、５列→４列→３列→２列という風に列の数が減っていく。
②スマホの場合
・２列で固定。
③それ以外(タブレット端末等)
・３列で固定。

http://gigazine.net/
上記サイトと同じような感じにしたいです。

【現状】
①②③いずれの端末でも３列で固定されている。
■■■
■■■
■■■
■■■
↑のような感じです。

###style.css(子テーマ)

/*
Theme Name: stingerplus child
Template: stingerplus
Version: 20160525
*/

/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
strong {
background-color:#ffb6c1 !important;
}
/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
header {
	text-align: center;
}
.sitename img {
	max-width: 300px;
	margin: 0 auto;
}
strong {
background-color:#ffb6c1 !important;
}
/*-- ここまで --*/
}

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
strong {
background-color:#ffb6c1;
}

/*-- ここまで --*/
}
li.cat-item .children {
padding-left: 15px !important;
}

.backnon {
	background: none;
	padding: 0 10px;
}
@media only screen and (min-width: 781px) {
.backnon {
	padding: 0;
}
}
.itiran-custom dl {
	border: none;
	background: #fff;
	padding: 10px;
	margin-bottom: 20px; /* カード下に余白を追加 */
	box-shadow: 1px 3px 3px #999999;
	-moz-box-shadow: 1px 3px 3px #999999;
	-webkit-box-shadow: 1px 3px 3px #999999;
}
.itiran-custom dl:last-child {
	padding-bottom: 10px; /* 最後のカードに設定されている余白を修正 */
}
@media only screen and (min-width: 413px) { /* スマホは除外 */
.itiran-custom dl h3 a {
	font-size: 20px; /* 記事タイトルの文字サイズ */
	line-height: 1.4em; /* 記事タイトルの行の高さ */
}
.itiran-custom dl {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 20px;
}
.itiran-custom dd {
	height: auto;
	padding: 10px;
}
}
.itiran-custom dl {
	width: 32%;
	float: left;
	padding: 0;
	margin-right: 2%;
	margin-bottom: 20px;
}
.itiran-custom dl:nth-child(3n) {
	margin-right: 0;
}
.itiran-custom dl:last-child {
	padding: 0;
	margin-bottom: 20px;
}
.itiran-custom dt {
	float: none;
	width: 100%;
}
.itiran-custom dt img {
	width: 300px;
	height: auto;
}
.itiran-custom dd {
	height: 160px; /* タイトル・日付・カテゴリ部分のボックスの高さ */
	padding: 10px;
}

.inner {
	max-width: 1060px;
	padding: 0 10px;
	margin: 0 auto;
}
#headbox {
	padding: 0;
	margin: 0;
}
#header-l {
	text-align: center;
	float: none;
	max-width: initial;
}

###補足情報
利用しているテーマは、STINGER PLUS というフリーのテーマです。
WordPressのバージョンは 4.7.5です。

どんな情報でもありがたいです。
宜しくお願い致します。

Answer 1

例示しているサイト(http://gigazine.net/)をブラウザのデベロッパーツール(開発者ツール)を使用して確認すると、おおよその仕組みがわかります。

ざっと見た感じでは、各記事のサムネイルとタイトルのセットがsectionタグで囲まれていて、そのsectionの横幅(width)がメディアクエリで指定されているようです。

@media (min-width: 980px) {
    .content section {
        width: 24.5%;
    }
}
@media (min-width: 768px) {
    .content section {
        width: 49.5%;
    }
}
...

Comments

[hassan_x]

ありがとうございます。
ベストアンサーに選ばさせて頂きます。