dreispaltiges CSS-Grid-Layout

dreispaltiges-css-grid-layout.markdown

dreispaltiges CSS-Grid-Layout

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<div class="wrapper">
  <header>
    <nav class="mainnav">
      <ul>
        <li class="active"><strong>Startseite</strong></li>
        <li><a href="#">Über mich</a></li>
        <li><a href="#">Arbeiterstrandbadstraße</a></li>
        <li><a href="#">Kunst &amp; Kultur</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <div class="contentwrapper">
    <main class="contentcnt">

      <article class="maincnt">
        [[[https://codepen.io/jensgro/pen/1b02b73d42ded2781c265d5f66968f8d]]]
        <a href="#" class="goon">Mehr Infos</a>
      </article>

      <article class="maincnt">
        <img src="http://lorempixel.com/800/200" alt="" class="flexible"> [[[https://codepen.io/jensgro/pen/a71374da5a444e9af0385b5d9552293f]]]
        <a href="#" class="goon">Mehr Infos</a>
      </article>

      <article class="maincnt">
        [[[https://codepen.io/jensgro/pen/764e9f1ecba74371122134256da7dc86]]]
        <a href="#" class="goon">Mehr Infos</a>
      </article>
      
    </main>
    
          
<!-- ========= Seitencontainer für die Navigation. Da passt noch mehr rein.  -->
      <div class="sidecnt">
        <h2 class="visuallyhidden">Subnavigation</h2>
        <nav class="subnav">
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Romane</a></li>
            <li><a href="#">Krimis &amp; Thriller</a></li>
            <li><a href="#">Science Fiction &amp; Fantasy</a></li>
            <li><a href="#">Liebesromane</a></li>
            <li><a href="#">Ratgeber</a></li>
            <li><a href="#">Biografien &amp; Erinnerungen</a></li>
          </ul>
        </nav>        
      </div> <!-- /.sidecnt -->
    
    <!-- ========= Noch ein Seitencontainer. Gleiche Klasse wie oben - kann geändert oder ergänzt werden.  -->
      <aside class="sidecnt">
        <div class="sidebox">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/css-buddha-1.png" alt="CSS-Buddha" class="flexible">
        </div>
        <div class="sidebox">
        <h2>Title</h2>
        <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. </p>
        </div>
      </aside>  
    
  </div> <!-- /.contentwrapper -->

</div> <!-- /.wrapper -->

style.css

/* ==== Mit Flexbox das Layout erstellen ===== */

/* Sortierung div.sidecnt | 
								 .contentcnt | 	 
							aside.sidecnt
*/

/* Wrapper um alles */
.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}
/* Dieser Wert ist selbstverständlich nur ein Vorschlag! */


/* Wrapper um alle drei Spalten. */
.contentwrapper { 
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-areas: "nav content side";
	grid-gap: 20px;
}

/* Inhalt */ 
.contentcnt { 
	grid-area: content;
}

/* Navigation */
div.sidecnt {
	grid-area: nav;
}
/* Vorschlag: width: 240px; */

/* Bild und Teasercontainer */
aside.sidecnt {
	grid-area: side;
}



/* ========= Basics ===== */
/*  box sizing */
*, *:before, *:after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Fira Sans', sans-serif;
	background: #eee;
}

p {
	margin-bottom: 10px;
	line-height: 1.5;
}

a {
	color: #a20000;
}
a:hover, a:focus {
	text-decoration: none;
}

.goon {
	margin-top: 10px;
	display: inline-block;
}

.flexible {
	width: 100%; /* wichtig für Flexbox! */
	height: auto;
	max-width: 100%;
	display: block;
}

.visuallyhidden {
	position: absolute;
	top: -30000px;
	left: -30000px;
	height: 0;
	font-size: 0;
}

/* horizontale Navigation */
.mainnav ul, .mainnav li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;

	color: #fff;
	background: #a20000;
}

.mainnav ul {
	margin: 0;
}

.mainnav a, .mainnav strong {
	display: block;
	padding: 25px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.mainnav a {
	transition: all 0.5s ease;
}
.mainnav a:hover, .mainnav a:focus {
	background: #550000;
	text-decoration: underline;
}


/* subnav */
.subnav {
	margin: 20px 0;
}

.subnav ul, .subnav li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.subnav li {
	margin-bottom: 5px;
}

.subnav a {
	text-decoration: none;
	display: block;
	padding: 10px;
	background-color: #fff;
}

.subnav a:hover, .subnav a:focus {
	background-color: #a20000;
	color: #fff;
}

/* sidebox */
.sidebox {
	background-color: #fff;
	padding: 10px;
	/*  margin: 20px 20px 20px 0;*/
	margin: 20px 0;
	border-bottom: 5px solid #fff;
	transition: all 0.5s ease;
}
.sidebox:hover {
	border-bottom-color: #3498db;
}
.sidebox h2 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: normal;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: #666666;
}

/* maincnt */
.maincnt {
	margin: 20px 0;
	padding: 25px;
	background: #fff;
	border: 1px solid #dedede;
	box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.35);
}
.maincnt h3 {
	font-size: 32px;
	font-size: 2rem;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #cecece;
	font-weight: normal;
	color: #666666;
}
.maincnt .flexible {
	margin-bottom: 20px;
}




/* ========= Float-Version =========== */
@supports not (display: flex;) {
	.mainnav ul {
		overflow: hidden;
		padding: 0;
		margin: 0 0 0;
		list-style: none;
		color: #fff;
		background: #a20000;
	}

	.mainnav ul li {
		float: left;
		margin: 0;
	}
	.mainnav a, .mainnav strong {
		display: block;
		padding: 25px;
		font-size: 16px;
		font-weight: 600;
		text-transform: uppercase;
		color: #fff;
		text-decoration: none;
	}
	.mainnav a {
		transition: all 0.5s ease;
	}
	.mainnav a:hover {
		background: #550000;
		text-decoration: underline;
	}
}