Grid Layout

Developer
Simeon Simeonoff
Size
2,845 Kb
Views
38,456
  1. Grid Layout Previews
  2. Grid Layout HTML Codes
  3. Grid Layout CSS Codes

How do I make an grid layout?

What is a grid layout? How do you make a grid layout? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

Grid Layout Previews
IQ Test

Grid Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content">	<div class="grid">	<div class="item">Acting Deputy Commissioner and Head of Counter Terrorism Mark Rowley said hundreds of detectives have worked through the night, carrying out searches at six addresses. Those who died were a woman in her 40s, a man in his 50s, PC Keith Palmer and the	attacker, he said. Seven of the injured are still in hospital in a critical condition. A further 29 had been treated in hospital, Mr Rowley added. In the attack on Wednesday, a man drove a car along a pavement in Westminster knocking down pedestrians,	leaving dozens injured. He then stabbed a policeman and was shot dead by police in the grounds of Parliament.</div>	<div class="item">Item</div>	<div class="item item2">Item</div>	<div class="item">Item</div>	<div class="item">Item</div>	<div class="item box6">Item</div>	<div class="item box7">Item</div>	</div>
</div>
<div class="card">	<div class="card__header">Card Header</div>	<div class="card__body">	<div class="img">IMG</div>	<div class="text">Content</div>	</div>	<div class="card__footer">Footer</div>
</div>
</body>
</html>

Grid Layout - Script Codes CSS Codes

html, body { font-family: 'Arial', sans-serif; font-size: 16px; line-height: 22px;
}
.content { max-width: 1280px; margin: 0 auto;
}
.grid { display: -ms-grid; display: grid; grid-gap: 30px; grid-auto-rows: minmax(100px, auto); -ms-grid-columns: (minmax(300px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 24px;
}
.item { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: lightgray; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.card { display: -ms-grid; display: grid; grid-auto-rows: minmax(100px, 1fr); -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-template-areas: "hd hd hd" "bd bd bd" "ft ft ft"; padding: 16px;
}
.card__header { background: lightcyan; grid-area: hd;
}
.card__body { display: -ms-grid; display: grid; grid-area: bd; -ms-grid-columns: 1fr 3fr; grid-template-columns: 1fr 3fr; grid-template-areas: "img text";
}
.card__body--flipped { -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; grid-template-areas: "text img";
}
.card__body .img { background: purple; grid-area: img;
}
.card__body .text { background: orange; grid-area: text;
}
.card__footer { background: lightcyan; grid-area: ft;
}
Grid Layout - Script Codes
Grid Layout - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 2,845 Kb
Views 38,456
Do you need developer help for Grid Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simeon Simeonoff (simeonoff) Script Codes
Name
Flexbox SASS Grid
Material Radio Buttons
Flex Table
Material Checkboxes
Notification Animation - Bounce Blur
Bouncy Switch
Notification Animation
Toggle Buttons
A Pen by Simeon Simeonoff
Material Design Calendar
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!