Πίσω στο ευρετήριο

Responsive grid layout Posted: 04-Mar-2020 17:15 PM

html, css tutorial
Δες το Demo Κατέβασε τα αρχεία 3 downloads

Έχουμε μια ιστοσελίδα που ανταποκρίνεται σε όλα τα μεγέθη των οθονών(responsive).
Είναι γραμμένη πρώτα για κινητό(mobile first).
Όσο μεγαλώνει τοπ παράθυρο του browser έχουμε γράψει break points για να αλλάζουμε την δομή του περιεχομένου μας.
Το πρώτο είναι στα 768px και το δεύτερο στα 1024px.

  • Τα αρχεία μας θα είναι ένα index.html
  • Και ένα style.css

index.html


<!DOCTYPE html>
<html lang="en">
<head>
   <!-- ορίζουμε την κωδικοποίηση του αρχείου σε UTF-8 -->
   <meta charset="UTF-8">
   
   <!-- ορίζουμε το περιεχόμενο του αρχείου ως κείμενο/html -->
	<meta http-equiv="Content-Type" content="text/html" />
   
  <!--  ορίζουμε το πλάτος του παραθύρου του browser να προσαρμόζεται στο πλάτος της
   συσκευής που προβάλετε, και την αρχική κλίμακα σε 1.0. Με λίγα λόγια
   να μπορούμε να βλέπουμε την σελίδα σε κινητές συσκευές χωρίς περίεργα
   zoom -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
   
   <!-- θα χρησιμοποιήσουμε μια γραμματοσειρά απο τα google fonts -->
   <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet">
   
   <!-- θα συνδέσουμε το css αρχείο με την σελιδα -->
	<link rel="stylesheet" type="text/css" href="style.css">
   
   <!-- θα συμπληρώσουμε τον τίτλο της σελίδας όπου θα φαίνετε στο tab του browser -->
	<title>Responsive grid layout</title>
</head>
<body>

<!-- Το πρώτο element στην ιστοσελίδα μας θα είναι ο header(κεφαλίδα), όπου θα χωρίζεται
σε δύο στήλες, όταν η οθόνη είναι μεγαλύτερη απο 768px, θα έχουμε μια section 
left και μια section right. -->   
<header>
   <section class="container inner-header">
      <section class="left">
         <!-- μέσα στο left section θέλουμε έναν τίτλο ένα υπότιτλο και μια παράγραφο
         με κειμενο -->
         <h1>Responsive grid layout</h1>
         <h2>Κατεβάστε ελεύθερα τα αρχεία και φτιάξτε το δικό σας website</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
         Eius molestiae odio neque officia magnam quibusdam, atque vero quasi 
         tenetur voluptas repellendus quia consequatur velit delectus corporis laborum
         totam corrupti! Veniam!</p>
      </section>
      <section class="right">
         <!-- μέσα στο right section θέλουμε μια image με κείμενο απο κάτω και ενα 
         button buy now -->
         <img src="images/avengers-3.jpg">
         <p class="img-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            Omnis, quaerat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, cumque.</p>
         <a class="button buy-btn" href="">Buy now</a>
      </section>
   </section>
</header>

<!-- μετά το header θα έχουμε την nav bar με τρία links μέσα 
(αρχική,προϊόν,επικοινωνία), σε μικρές οθόνες(κάτω απο 768px) τα links θα είναι
στοιχισμένα στο κέντρο -->
<nav>
   <section class="container inner-nav">
      <ul>
         <li><a href="#">Αρχική</a></li>
         <li><a href="#">Προϊόν</a></li>
         <li><a href="#">Επικοινωνία</a></li>
      </ul>
   </section>
</nav>

<!-- μετά την nav bar θα έχουμε δυο section με τρία προϊόντα το καθένα, το κάθε προϊόν
θα έχει μια φωτό με κείμενο απο κάτω το όνομα του προϊόντος απο πάνω και ενα
button για λεπτομέριες  μετά τα 768px η μια στήλη που βλέπουμε σε μικρή οθόνη
θα μετατρέπεται σε τρείς-->

<h3 class="container section-title">Section one title</h3>
<section class="container products">
   <!-- Προϊόν 1 -->
   <div class="product">
      <p class="name">Product 1</p>
      <img src="images/ironman-2.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Voluptatem maiores voluptates odio dolores enim iusto praesentium? 
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>
    
   <!-- Προϊόν 2 -->
   <div class="product">
      <p class="name">Product 2</p>
      <img src="images/avengers-3.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Voluptatem maiores voluptates odio dolores enim iusto praesentium? 
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>
   
   <!-- Προϊόν 3 -->
   <div class="product">
      <p class="name">Product 3</p>
      <img src="images/spiderman-2.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Voluptatem maiores voluptates odio dolores enim iusto praesentium? 
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>
</section>


<h3 class="container section-title">Section two title</h3>
<section class="container products">
  
   <!-- Προϊόν 1 -->
   <div class="product">
      <p class="name">Product 1</p>
      <img src="images/avengers-3.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Voluptatem maiores voluptates odio dolores enim iusto praesentium?
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>
   
   <!-- Προϊόν 2 -->
   <div class="product">
      <p class="name">Product 2</p>
      <img src="images/spiderman-2.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Voluptatem maiores voluptates odio dolores enim iusto praesentium? 
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>

   <!-- Προϊόν 3 -->
   <div class="product">
      <p class="name">Product 3</p>
      <img src="images/ironman.jpg">
      <p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Voluptatem maiores voluptates odio dolores enim iusto praesentium? 
      Voluptas totam dolorum nemo!</p>
      <a class="button details" href="#">Λεπτομέριες</a>
   </div>
</section>

<!-- τέλος θα έχουμε το footer όπου θα χωρίζεται σε τέσσερις στήλες με διάφορα links
η κάθε μία. Εδω τα page breaks που θα έχουμε είνα στα 768px και στα 1024px
Στα 768px θα έχουμε 2 στήλες και στα 1024px 4 στήλες. -->
<footer>
   <section class="container inner-footer">
      <!-- κάθε div είναι και μια στήλη -->
      <div>
         <p>Lorem ipsum <span class="em">dolor sit amet, consectetur adipisicing elit</span>. 
         Aperiam officiis, labore repellendus numquam explicabo corrupti commodi, 
         necessitatibus dolor ducimus molestiae quam, expedita nihil eligendi, 
         ad odio praesentium. Ea quas quis harum, eum aliquam adipisci.</p>
         <div class="links-group">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
         </div>
      </div>
      
      <!-- Στήλη 2 -->
      <div>
         <p class="name">product 1</p>
         <img src="images/avengers-3.jpg">
         <div class="links-group">
            <a href="#">link 2</a>
            <a href="#">link 3</a>
         </div>
      </div>
      
      <!-- Στήλη 3 -->
      <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis, 
         labore repellendus numquam explicabo corrupti commodi, necessitatibus dolor 
         <span class="em">ducimus molestiae quam, expedita nihil eligendi</span>, ad odio 
         praesentium. Ea quas quis harum, eum aliquam adipisci officiis, atque, asperiores 
         accusantium dolorum debitis.</p>
         <div class="links-group">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
         </div>
      </div>

      <!-- Στήλη 4 -->
      <div>
         <p class="name">product 1</p>
         <img src="images/spiderman-2.jpg">
         <div class="links-group">
            <a href="#">link 2</a>
            <a href="#">link 3</a>
         </div>
      </div>

   </section>
</footer>
</body>
</html>

style.css



/* Όλο το περιεχόμενο είναι γραμμένο πρώτα για κινητό και
μετά με media queries θα το προσαρμόζουμε σε κάθε αλλαγή της
οθόνης */

/* κάνουμε ένα reset στο padding και margin σε όλα τα elements 
	για να δώσουμε τις δικές τιμές σα κάθε στοιχείο(element)*/
*{ 
	box-sizing: border-box; /* info link στο τέλος */
	padding: 0; /* είναι ο 'αέρας' του υλικού μέσα σε κάθε element */
	margin: 0; /* είναι ο εξωτερικός 'αέρας' γύρο από κάθε element */
}

/* ορίζουμε για όλα τα html στοιχεία την γραμματοσειρά 
και το χρώμα της */
body, html{
	font-family: Ubuntu, 'sans-serif';
	color: #333;
}

/* όλο το περιεχόμενο της σελίδας βρίσκεται σε ένα container
στο οποίο ορίζουμε... */
.container{
	max-width: 1200px; /* .. το μέγιστο πλάτος να είναι 1200px */
	margin: 0 auto; /* .. να είναι στο κέντρο του browser */
	padding: 20px; /* .. και ο εσωτερικός 'αέρας' απο το υλικό 20px */
	/* Το padding 20px θα αποτρέψει το υλικό να ακουμπάει στα άκρα
	του browser, στις μικρές οθόνες */
}

/* λέμε στις images να παίρνουν το μέγεθος του
container που βρίσκονται */
img{ 
	max-width: 100%;
}

a{ /* δεν θέλουμε κανενα εξ ορισμού στυλ στα links */
	text-decoration: none;
}

/* Ορίζουμε ενα γενικό στυλ για όλα τα buttons. 
Δεν χρειάζεται να είναι <button> μπορεί να είναι ενα <a class='button'> */
.button, button{
	display: inline-block; 
	padding: 10px 30px;
	border-color: #333;
	border-style: solid;
	border-width: 1px;
}

/* Header */
/* ================================= */

/* Το header είναι το πρώτο στοιχείο της σελίδας μας
θα του δώσουμε το πλάτος όλου του browser, ενα φόντο μαύρο
και θα Στοιχίσουμε το περιεχόμενο στο κέντρο */
header{
	width: 100%;
	background-color: #000;
	text-align: center;
}

/* όλο το περιεχόμενο του header βρίσκεται εδώ */
.inner-header{
	display: grid; /* θα το προβάλουμε ως grid(πλέγμα) */
	grid-template-columns: 1fr; /* θα του δώσουμε μόνο μια στήλη γιατί 
	σχεδιάζουμε πρώτα για κινητό αυτό θα αλλάζει για μεγαλύτερες οθόνες*/
	
	grid-row-gap: 50px; /* το grid παράγει αυτόματα σειρές για όσα 
	στοιχεία(απόγονοι πρώτου βαθ.) βρίσκονται μέσα, στην περίπτωση εδω δύο
	το .left και το .right και του δίνουμε την απόσταση 50px που θα χωρίζει την μία
	σειρά απο την άλλη. */
	
	padding-top: 30px; /* θέλουμε εναν εσωτερικό 'αέρα' απο την κορυφή */
	padding-bottom: 50px; /* και στην κάτω πλευρά */
	color: #d4d4d4; /* το χρώμα της γραμματοσειράς */
}

.left h1{
	font-size: 36px;
	font-weight: 400;
}

.left h2{
	font-size: 22px;
	font-weight: 400;
	margin-top: 20px;
}

.left p{
	margin-top: 20px;
	line-height: 22px;
}

.right .img-caption{
	margin-top: 20px;
}

.right p{
	line-height: 22px;
}

/* Εδω έχουμε το buy now button του header */
.right .buy-btn{
	background-color: #1D8348;
	color: #fff;
	border: none;
	margin-top: 30px;
}

.right .buy-btn:hover,
.right .buy-btn:focus{
	background-color: #145A32;
}

/* Και φτάσαμε στο break point του header που λέμε ότι όταν το μεγεθος
του browser είναι 768px και πάνω θέλουμε να χωριστεί το περιεχόμενο
σε δυο στήλες και να προσθέσουμε ενα κενό των 50px αναμεσα τους*/
@media screen and (min-width: 768px){
	.inner-header{
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 50px;
	}
}

/* navigation */
/* ============================ */
/* Εδω έχουμε το μενου πλοήγησης με τα links να βρίσκονται μέσα σε μια
λίστα όπου έχουμε ορίσει την προβολή της ως flexbox */
nav{
	width: 100%;
	background-color: #376e93;
}
.inner-nav{
	padding: 0;
}
nav ul{
	list-style-type: none;
	display: flex; /* Ορίζουμε την λιστα ως flex */
	flex-direction: row; /* θέλουμε όλα τα links σε μια σειρά */
	justify-content: center; /* και στοιχισμένα στο κέντρο */
}

nav a{
	display: inline-block; /* info στο τέλος */
	padding: 15px 25px; /* δινουμε έναν 'αέρα' στα links */
	color: #fff; /* και χρώμα ασπρο */
	font-size: 15px; /* και μέγεθος σε 14px */
}

nav a:hover,
nav a:focus{
	background-color: #193243;
}

/* όταν το μεγεθος του browser είναι 768px και πάνω τα links θα 
στοιχίζονται στα αριστερά της μπάρας */
@media screen and (min-width: 768px){
	nav ul{
		justify-content: start;
	}
}

/* section title*/
/* Έχουμε τον τίτλο κάθες ενότητας */
.section-title{
	font-weight: 400;
	margin-top: 40px;
	padding-bottom: 5px;
	border-bottom: thin solid #d4d4d4;
	font-size: 22px;
	text-align: center; /* στοίχιση στο κέντρο */
}

@media screen and (min-width: 768px){
	.section-title{
		text-align: left; /* στοίχιση στα αριστερά */
	}
}

/* Products */
/* ========================================== */
/* Ίδια τακτική και με τα products δεν χρειάζεται να εξηγώ πάλι
για το grid και για τα διάφορα στυλ που έχουμε συναντήσει και 
παραπάνω. */
.products{
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 50px;
	margin-top: 20px;
}
.product{
	text-align: center;	
}
.product .name{
	font-size: 18px;
	margin-bottom: 15px;
}
.product .caption{
	margin-top: 15px;
}
.product a.details{
	margin-top: 20px;
	border: none;
	background-color: #376e93;
	color: #fff;
	font-size: 15px;
}
/* Kai όταν ο browser περάσει τα 768px οι στήλες θα γίνουν τρεις */
@media screen and (min-width: 768px){
	.products{
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 20px;

	}
	.products img{
		object-fit: cover; /* info στο τελος */
	}
}

/* Footer */
/* ========================================== */
/* Ίδια τακτική και με το footer δεν χρειάζεται να εξηγώ πάλι
για το grid και για τα διάφορα στυλ που έχουμε συναντήσει και 
παραπάνω. */
footer{
	background-color: #222;
	margin-top: 100px;
}
.inner-footer{
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 30px;
}
.inner-footer > div{
	border-bottom: thin solid #333;
	padding-bottom: 30px;
	color: #d4d4d4;
}
.inner-footer > div:last-child{
	border: none;
}
.inner-footer > div p{
	line-height: 22px;
	font-size: 15px;
	margin-bottom: 20px;
	padding-top: 30px;
}
footer .links-group{
	text-align: center;
	margin-top: 30px;
}
footer a{
	/*color: #EDBB99;*/
	color: #999;
	font-size: 15px;
	text-decoration: underline;
	padding-right: 25px;
}

footer a:hover{
	text-decoration: none;
}

footer img{
	display: block;
	width: 70%;
	margin: 20px auto;
}

.inner-footer .name{
	font-size: 16px;
	text-align: center;
}
footer .em{
	color: #BA4A00;
	font-style: italic;
}

/* Στον footer έχουμε δυο break points το πρώτο στα 768px 
όπου θέλουμε δυο στήλες */

@media screen and (min-width: 768px){
	.inner-footer{
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 50px;
	}
	footer img{
		width: 100%;
	}
	.inner-footer > div:nth-child(3){
		border: none;
	}

}

/* Και στο δεύτερο στα 1024px όπου θέλουμε να προβάλουμε 4 στήλες */
@media screen and (min-width: 1024px){
	.inner-footer{
		grid-template-columns: repeat(4, 1fr);
	}
	.inner-footer > div{
		border: none;
	}
}

Περισότερες πληροφορίες πάνω στίς CSS ιδιότητες που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια css tutorials

Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα.

php Tutorials

Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

javascript Tutorials

Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')