Skip to content

Koci H. #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kocibey01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Koci H. #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,13 @@
# Grid Components

In this exercise, we're going to spend more time with CSS grid implementing specific layouts to really nail down our
Grid skills.
In this exercise, we're going to spend more time with CSS grid implementing specific layouts to really nail down our Grid skills.

## Instructions
The `index.html` file in this repoistory contains place holder sections for you to implement different layouts. Take this file and implement Grid layouts in each section according to the requirements defined by the heading.

The [HTML file](src/index.html) in this repository contains placeholder sections for you to implement different
layouts.
Take this file and implement Grid layouts in each section according to the requirements defined by the heading.

Do not edit the HTML elements within the body tag, only the styles in the [CSS file](src/styles.css). The end
result should achieve layouts that look like so:
The end result should achieve layouts that look like so:

![Final Result](images/final-result.png)

## Tips

- Again, work with little coloured blocks using div tags and align them using grid.
- Use div tags to create your blocks give them coloured borders to be able to see them more clearly, while you are
- trying to line them up.

## Extension Criteria

Try to replicate the Grid Madness section from the image!
- Use div tags to create your blocks give them coloured borders to be able to see them more clearly, while you are trying to line them up.
Binary file modified images/final-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 184 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>

<style>
/* Don't touch this START */

.container {
padding: 8px;
border: 2px dotted lightblue;
}

.box {
min-width: 40px;
min-height: 40px;
padding: 4px;
border: 2px dotted lightcoral;
}

.inner-box {
min-width: 40px;
min-height: 40px;
border: 2px dotted lightgreen;
}

/* Don't touch this END */

/* Write CSS Here */

.two-column-grid__expand-two {
display:grid;
grid-template-columns: 150px 1fr;
gap: 5px

}

.logo {
border: dotted 2px green
}

.three-column-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px
}

.three-column-grid__expand-two {
display: grid;
grid-template-columns: 50px 1fr 50px;
gap: 5px
}

.five-column-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px
}

.center-grid {
grid-template-columns: 220px;
display: grid;
justify-content: center;
}

.centered {
}



/* Grid within Grid Section */
/* Practice re-using classes */

.two-column-grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 5px
}

.two-column-grid > .box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
gap: 4px
}

div + div + div + div + div + div + div > .container {
display: grid;
grid-template-columns: 55px 1fr 150px;
gap: 5px

}

div + div + div + div + div + div + div > .container > .box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px
}

div + div + div + div + div + div + div > .container > .expand {
display: grid;
grid-template-columns: 1fr
}


</style>
</head>
<body>
<div>
<h2>Two Column Grid (Icon Pattern)</h2>
<div class="container two-column-grid__expand-two">
<div class="logo"></div>
<div class="box expand"></div>
</div>
</div>
<div>
<h2>Three Column Grid</h2>
<div class="container three-column-grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div>
<h2>Three Column Grid with Expansion</h2>
<div class="container three-column-grid__expand-two">
<div class="box"></div>
<div class="box expand"></div>
<div class="box"></div>
</div>
</div>
<div>
<h2>Five Column Grid</h2>
<div class="container five-column-grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div>
<h2>Center Grid</h2>
<div class="container center-grid">
<div class="box centered"></div>
</div>
</div>
<div>
<h2>Grid within Grid #1</h2>
<div class="container two-column-grid">
<div class="box">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
<div class="box">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
</div>
</div>
<div>
<h2>Grid within Grid #2 (Expansion)</h2>
<div class="container">
<div class="box">
<div class="inner-box"></div>
</div>
<div class="box expand">
<div class="inner-box width-sm"></div>
</div>
<div class="box">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
</div>
</div>
</body>
</html>