====== CSS Examples - CSS Templates ====== * description : %%CSS%% Templates * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-12 Mon \\ =====The source of this article==== [[https://www.w3schools.com/css/css_templates.asp|CSS Templates]]\\ =====CSS Layout Templates===== %%CSS%%로 반응형 스타터 템플릿을 만들었습니다.\\ \\ 모든 프로젝트에서 자유롭게 수정, 저장, 공유 및 사용할 수 있습니다.\\ =====Header, equal columns and footer===== ====Using float====

CSS Template using Float

In this example, we have created a header, three qeual columns and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

Header

Column 1
Column 2
Column 3

Footer

 ====Using flexbox====

CSS Template using Flexbox

In this example, we have created a header, three equal columns and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

Note: Flexbox is not supported in Internet Explorer 10 and earlier versions.

Header

Column 1
Column 2
Column 3

Footer

 ====Using grid====

CSS Template using Grid

In this example, we have created a header, three equal columns and a footer. On Smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

Note: The Grid layout Module is not supported in Internet Explorer or Edge 15 and earlier versions.

Header

Column 1
Column 2
Column 3

Footer

 {{tag>오션, CSS Templates}}