jQueryでタブを作成してその中に画像を配置する

前提・実現したいこと

jQueryを使いページ内でタブ切り替えをつけてタブの中に画像を配置してタブを切り替えることで違う種類の画像に切り替える機能の導入を考えています。

発生している問題・エラーメッセージ

display gridを使いレイアウトをしているのですが、タブのボタン部分とタブの中身のレイアウトにgridが効かなく、配置がうまくできません。
articleやほかの外枠はレイアウトできるのですが、その中のimgがうまく配置できません。
.imgbox1 {grid-column: 2/3;grid-row: 6/7;}で本来でしたら下の行に配置するようにしたく考えていますがうまくいきません。

該当のソースコード

html
1<body>
2	<div class="warpper">
3<article>
4<div class="js-tab">
5	<div class="tab1 active">タブその1</div>
6</div><!-- /.js-tab -->
7<div class="js-tab_content tab1 active">
8 <div class="imgbox1">
9	<img src="img/280x280.png">
10	<img src="img/280x280.png">
11	<img src="img/280x280.png">
12	<img src="img/280x280.png">
13 </div>
14</div>
15</article>
16</body>

css
1.warpper {
2	display: grid;
3	grid-template-columns: 10% 80% 10%;
4	grid-template-rows: 80px 250px 30px 80px 300px 300px 300px 300px 20px 100px;
5}
6article{
7	grid-column: 2/3;
8	grid-row: 4/9;
9	background-color: #00FF93;
10}
11.imgbox1 {
12	grid-column: 2/3;
13	grid-row: 6/7;
14}
15div {*zoom: 1;}
16div:after {display: block;content: "";clear: both;}
17.js-tab {margin-bottom: 20px;}
18.js-tab > div {float:left;width:20%;background:#666;color:#fff;text-align: center;padding:15px 0;cursor:pointer;}
19.js-tab > div.active {background:#000;}
20.js-tab_content {display:none;padding:20px 0;}
21.js-tab_content.active {display:block;}

　```js
$(function(){
$('.js-tab > div').click(function(){
$('.js-tab > div,.js-tab_content').removeClass('active');
var tabClass = $(this).attr('class');
$(this).addClass('active');
$('.js-tab_content').each(function(){
if($(this).attr('class').indexOf(tabClass) != -1){
$(this).addClass('active').fadeIn();
}else{$(this).hide();}
});
});

});

root_jp

2019/01/22 11:53

うまく配置がいかないと言われても、どうなればうまくいってると言えるのかが回答者は分からないため、うまくいっている絵などを載せた方が解答を見込めると思います。ちなみに、girdでレイアウトしてると書かれてますが、warpperクラスがHTMLでどこにも使われていないようですが、この辺りが問題ではないですか？