Редакция:	12.05.2019
Теги:	CSS

Float сетка

Сетка на основе float блоков (12 колонок). Аналог сетки BootStrap 3 для тех кому нужна только сетка.

CSS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

/* Version: 1.1

*******************************************************************************/

@charset 'utf-8';

*******************************************************************************/

.row:after {

content: '';

display: block;

width: 100%;

height: 0;

margin: 0;

padding: 0;

float: none;

clear: both;

border: none;

background: none;

}

.row {

position: relative;

margin: 0 auto;

}

.row > div {

position: relative;

float: left;

display: inline-block;

width: 100%;

}

*******************************************************************************/

.row > .xx-0 { width: 0 }

.row > .xx-1 { width: 8.333333333% }

.row > .xx-2 { width: 16.66666667% }

.row > .xx-3 { width: 25% }

.row > .xx-4 { width: 33.33333333% }

.row > .xx-5 { width: 41.66666667% }

.row > .xx-6 { width: 50% }

.row > .xx-7 { width: 58.33333333% }

.row > .xx-8 { width: 66.66666667% }

.row > .xx-9 { width: 75% }

.row > .xx-10 { width: 83.33333333% }

.row > .xx-11 { width: 91.66666667% }

.row > .xx-12 { width: 100% }

.row > .xx-of-1 { margin-left: 8.333333333% }

.row > .xx-of-2 { margin-left: 16.66666667% }

.row > .xx-of-3 { margin-left: 25% }

.row > .xx-of-4 { margin-left: 33.33333333% }

.row > .xx-of-5 { margin-left: 41.66666667% }

.row > .xx-of-6 { margin-left: 50% }

.row > .xx-of-7 { margin-left: 58.33333333% }

.row > .xx-of-8 { margin-left: 66.66666667% }

.row > .xx-of-9 { margin-left: 75% }

.row > .xx-of-10 { margin-left: 83.33333333% }

.row > .xx-of-11 { margin-left: 91.66666667% }

@media (min-width: 375px) {

.row > .xs-0 { width: 0 }

.row > .xs-1 { width: 8.333333333% }

.row > .xs-2 { width: 16.66666667% }

.row > .xs-3 { width: 25% }

.row > .xs-4 { width: 33.33333333% }

.row > .xs-5 { width: 41.66666667% }

.row > .xs-6 { width: 50% }

.row > .xs-7 { width: 58.33333333% }

.row > .xs-8 { width: 66.66666667% }

.row > .xs-9 { width: 75% }

.row > .xs-10 { width: 83.33333333% }

.row > .xs-11 { width: 91.66666667% }

.row > .xs-12 { width: 100% }

.row > .xs-of-0 { margin-left: 0% }

.row > .xs-of-1 { margin-left: 8.333333333% }

.row > .xs-of-2 { margin-left: 16.66666667% }

.row > .xs-of-3 { margin-left: 25% }

.row > .xs-of-4 { margin-left: 33.33333333% }

.row > .xs-of-5 { margin-left: 41.66666667% }

.row > .xs-of-6 { margin-left: 50% }

.row > .xs-of-7 { margin-left: 58.33333333% }

.row > .xs-of-8 { margin-left: 66.66666667% }

.row > .xs-of-9 { margin-left: 75% }

.row > .xs-of-10 { margin-left: 83.33333333% }

.row > .xs-of-11 { margin-left: 91.66666667% }

}

@media (min-width: 1024px) {

.row > .sm-0 { width: 0 }

.row > .sm-1 { width: 8.333333333% }

.row > .sm-2 { width: 16.66666667% }

.row > .sm-3 { width: 25% }

.row > .sm-4 { width: 33.33333333% }

.row > .sm-5 { width: 41.66666667% }

.row > .sm-6 { width: 50% }

.row > .sm-7 { width: 58.33333333% }

.row > .sm-8 { width: 66.66666667% }

.row > .sm-9 { width: 75% }

.row > .sm-10 { width: 83.33333333% }

.row > .sm-11 { width: 91.66666667% }

.row > .sm-12 { width: 100% }

.row > .sm-of-0 { margin-left: 0% }

.row > .sm-of-1 { margin-left: 8.333333333% }

.row > .sm-of-2 { margin-left: 16.66666667% }

.row > .sm-of-3 { margin-left: 25% }

.row > .sm-of-4 { margin-left: 33.33333333% }

.row > .sm-of-5 { margin-left: 41.66666667% }

.row > .sm-of-6 { margin-left: 50% }

.row > .sm-of-7 { margin-left: 58.33333333% }

.row > .sm-of-8 { margin-left: 66.66666667% }

.row > .sm-of-9 { margin-left: 75% }

.row > .sm-of-10 { margin-left: 83.33333333% }

.row > .sm-of-11 { margin-left: 91.66666667% }

}

@media (min-width: 1280px) {

.row > .md-0 { width: 0 }

.row > .md-1 { width: 8.333333333% }

.row > .md-2 { width: 16.66666667% }

.row > .md-3 { width: 25% }

.row > .md-4 { width: 33.33333333% }

.row > .md-5 { width: 41.66666667% }

.row > .md-6 { width: 50% }

.row > .md-7 { width: 58.33333333% }

.row > .md-8 { width: 66.66666667% }

.row > .md-9 { width: 75% }

.row > .md-10 { width: 83.33333333% }

.row > .md-11 { width: 91.66666667% }

.row > .md-12 { width: 100% }

.row > .md-of-0 { margin-left: 0% }

.row > .md-of-1 { margin-left: 8.333333333% }

.row > .md-of-2 { margin-left: 16.66666667% }

.row > .md-of-3 { margin-left: 25% }

.row > .md-of-4 { margin-left: 33.33333333% }

.row > .md-of-5 { margin-left: 41.66666667% }

.row > .md-of-6 { margin-left: 50% }

.row > .md-of-7 { margin-left: 58.33333333% }

.row > .md-of-8 { margin-left: 66.66666667% }

.row > .md-of-9 { margin-left: 75% }

.row > .md-of-10 { margin-left: 83.33333333% }

.row > .md-of-11 { margin-left: 91.66666667% }

}

@media (min-width: 1440px) {

.row > .bg-0 { width: 0 }

.row > .bg-1 { width: 8.333333333% }

.row > .bg-2 { width: 16.66666667% }

.row > .bg-3 { width: 25% }

.row > .bg-4 { width: 33.33333333% }

.row > .bg-5 { width: 41.66666667% }

.row > .bg-6 { width: 50% }

.row > .bg-7 { width: 58.33333333% }

.row > .bg-8 { width: 66.66666667% }

.row > .bg-9 { width: 75% }

.row > .bg-10 { width: 83.33333333% }

.row > .bg-11 { width: 91.66666667% }

.row > .bg-12 { width: 100% }

.row > .bg-of-0 { margin-left: 0% }

.row > .bg-of-1 { margin-left: 8.333333333% }

.row > .bg-of-2 { margin-left: 16.66666667% }

.row > .bg-of-3 { margin-left: 25% }

.row > .bg-of-4 { margin-left: 33.33333333% }

.row > .bg-of-5 { margin-left: 41.66666667% }

.row > .bg-of-6 { margin-left: 50% }

.row > .bg-of-7 { margin-left: 58.33333333% }

.row > .bg-of-8 { margin-left: 66.66666667% }

.row > .bg-of-9 { margin-left: 75% }

.row > .bg-of-10 { margin-left: 83.33333333% }

.row > .bg-of-11 { margin-left: 91.66666667% }

}

@media (min-width: 1600px) {

.row > .lg-0 { width: 0 }

.row > .lg-1 { width: 8.333333333% }

.row > .lg-2 { width: 16.66666667% }

.row > .lg-3 { width: 25% }

.row > .lg-4 { width: 33.33333333% }

.row > .lg-5 { width: 41.66666667% }

.row > .lg-6 { width: 50% }

.row > .lg-7 { width: 58.33333333% }

.row > .lg-8 { width: 66.66666667% }

.row > .lg-9 { width: 75% }

.row > .lg-10 { width: 83.33333333% }

.row > .lg-11 { width: 91.66666667% }

.row > .lg-12 { width: 100% }

.row > .lg-of-0 { margin-left: 0% }

.row > .lg-of-1 { margin-left: 8.333333333% }

.row > .lg-of-2 { margin-left: 16.66666667% }

.row > .lg-of-3 { margin-left: 25% }

.row > .lg-of-4 { margin-left: 33.33333333% }

.row > .lg-of-5 { margin-left: 41.66666667% }

.row > .lg-of-6 { margin-left: 50% }

.row > .lg-of-7 { margin-left: 58.33333333% }

.row > .lg-of-8 { margin-left: 66.66666667% }

.row > .lg-of-9 { margin-left: 75% }

.row > .lg-of-10 { margin-left: 83.33333333% }

.row > .lg-of-11 { margin-left: 91.66666667% }

}