CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 73

CSS3 Grid Layout - is short hand

So I just started coding in html/css and playing with grid layout.

I made 6 columns with 4 rows. but ended up with a lot of coding, was wondering is there a more efficient way to write it.

Please note the example code I shown below is just for internet explorer, my original coded worked with ff and chrome so I'm just playing with IE for now.

Codepen

HTML & CSS - 

.wrap2{
    /*display:flex;
    */
    /*flex-wrap:wrap;
    */
     margin: auto;
     padding:0 2em 0 2em;
     color:#ffffff;
     background-color:#000000;
     max-width: 1000px;
}
 .star-container{
     display: grid;
     display: -ms-grid;
     width:400px;
     max-width:100%;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr;
     -ms-grid-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
     -ms-grid-rows: 1fr 1fr 1fr 1fr;
     text-align: left;
     margin: 0 auto;
}
 .star{
     padding:0 20px;
     -ms-grid-column: 1/2;
     -ms-grid-row: 1;
}
 .star.a{
     -ms-grid-column: 1;
     -ms-grid-row: 1;
     -ms-grid-column-span: 2;
}
 .star.b{
     -ms-grid-column: 3;
     -ms-grid-row: 1;
     -ms-grid-column-span: 1;
}
 .star.c{
     -ms-grid-column: 4;
     -ms-grid-row: 1;
     -ms-grid-column-span: 1;
}
 .star.d{
     -ms-grid-column:5;
     -ms-grid-row: 1;
     -ms-grid-column-span: 1;
}
 .star.e{
     -ms-grid-column:6;
     -ms-grid-row: 1;
     -ms-grid-column-span: 1;
}
 .star.f{
     -ms-grid-column: 7;
     -ms-grid-row: 1;
     -ms-grid-column-span: 1;
}
 .star.g{
     -ms-grid-column: 1;
     -ms-grid-row: 2;
     -ms-grid-column-span: 2;
}
 .star.h{
     -ms-grid-column: 3;
     -ms-grid-row: 2;
     -ms-grid-column-span: 1;
}
 .star.i{
     -ms-grid-column: 4;
     -ms-grid-row: 2;
     -ms-grid-column-span: 1;
}
 .star.j{
     -ms-grid-column:5;
     -ms-grid-row: 2;
     -ms-grid-column-span: 1;
}
 .star.k{
     -ms-grid-column: 6;
     -ms-grid-row: 2;
     -ms-grid-column-span: 1;
}
 .star.l{
     -ms-grid-column: 7;
     -ms-grid-row: 2;
     -ms-grid-column-span: 1;
}
 .star.m{
     -ms-grid-column: 1;
     -ms-grid-row: 3;
     -ms-grid-column-span: 2;
}
 .star.n{
     -ms-grid-column: 3;
     -ms-grid-row: 3;
     -ms-grid-column-span: 1;
}
 .star.o{
     -ms-grid-column: 4;
     -ms-grid-row: 3;
     -ms-grid-column-span: 1;
}
 .star.p{
     -ms-grid-column:5;
     -ms-grid-row: 3;
     -ms-grid-column-span: 1;
}
 .star.q{
     -ms-grid-column: 6;
     -ms-grid-row: 3;
     -ms-grid-column-span: 1;
}
 .star.r{
     -ms-grid-column: 7;
     -ms-grid-row: 3;
}
 .star.s{
     -ms-grid-column: 1;
     -ms-grid-row: 4;
     -ms-grid-column-span: 2;
}
 .star.t{
     -ms-grid-column: 3;
     -ms-grid-row: 4;
     -ms-grid-column-span: 1;
}
 .star.u{
     -ms-grid-column: 4;
     -ms-grid-row: 4;
}
 .star.v{
     -ms-grid-column:5;
     -ms-grid-row: 4;
}
 .star.w{
     -ms-grid-column: 6;
     -ms-grid-row: 4;
}
 .star.x{
     -ms-grid-column: 7;
     -ms-grid-row: 4;
     -ms-grid-column-span: 1;
}
 .star:nth-child(-n+6){
     border-top:1px solid #fff;
}
 .star:nth-child(6n+1){
     padding-left:2em;
}
 .star:nth-child(6n+6){
     padding-right:2em;
}
<div class="wrap2">
	<div class="sectionpadding column">
	  <h2>My skills</h2><br/><br/>
	  <div class="star-container">
		<div class="star a">HTML/CSS</div>
		<div class="star b"><i class="fas fa-star"></i></div>
		<div class="star c"><i class="fas fa-star"></i></div>
		<div class="star d"><i class="fas fa-star"></i></div>
		<div class="star e"><i class="fas fa-star"></i></div>
		<div class="star f" ><i class="far fa-star"></i></div>
		<div class="star g">JavaScript/jQuery</div>
		<div class="star h"><i class="fas fa-star"></i></div>
		<div class="star i"><i class="fas fa-star"></i></div>
		<div class="star j"><i class="fas fa-star"></i></div>
		<div class="star k"><i class="far fa-star"></i></div>
		<div class="star l" ><i class="far fa-star"></i></div>
		 <div class="star m">Bootstrap</div>
		<div class="star n"><i class="fas fa-star"></i></div>
		<div class="star o"><i class="fas fa-star"></i></div>
		<div class="star p "><i class="fas fa-star"></i></div>
		<div class="star q"><i class="far fa-star"></i></div>
		<div class="star r" ><i class="far fa-star"></i></div>
		 <div class="star s">Photoshop</div>
		<div class="star t"><i class="fas fa-star"></i></div>
		<div class="star u"><i class="fas fa-star"></i></div>
		<div class="star v"><i class="fas fa-star"></i></div>
		<div class="star w"><i class="far fa-star"></i></div>
		<div class="star x" ><i class="far fa-star"></i></div>
	  </div>
	</div>
</div>

Upvotes: 2

Views: 55

Answers (1)

James Courson
James Courson

Reputation: 66

That's about the best way to do it in a static page.

You could specify the italics in CSS to remove the i tags, though.

As for the CSS, you could use parent:grid-template-areas and child:grid-area.

Upvotes: 2

Related Questions