Skip to content

Instantly share code, notes, and snippets.

@whichbuffer

whichbuffer/GridTest_.idea_misc.xml

Created September 6, 2018 07:36
Show Gist options
  • Save whichbuffer/8f95ec85467a5c685ca8c7909fd9987b to your computer and use it in GitHub Desktop.
Save whichbuffer/8f95ec85467a5c685ca8c7909fd9987b to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid
Raw
GridTest_.idea_misc.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>
Raw
GridTest_.idea_modules.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/GridTest.iml" filepath="$PROJECT_DIR$/GridTest.iml" />
</modules>
</component>
</project>
Raw
GridTest_grid.css
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
Raw
GridTest_GridTest.iml
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
Raw
GridTest_index.html
<head>
<link rel="stylesheet" type="text/css" href="grid.css">
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item5">6</div>
</div>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment